调查问卷

真实的问卷参考：
https://wj.qq.com/

其中：
跳转逻辑编辑器：就是使用joint来做的拖拽功能；

html：

<div class="section-content-container">

    <!--大item start-->
    <div class="section-content" *ngFor="let item of question">
      <!--类型-->
      <div class="question-type">
        {{item.questionTypeTitle}}
      </div>
      <ng-container *ngFor="let item2 of item.childs">
        <!--多选 start-->
        <div class="question-item" *ngIf="item2.type==1">
          <div class="question-title"><span class="require-star">*</span>{{item2.questionTitle}}</div>
          <div class="question-answer">
            <nz-checkbox-group [(ngModel)]="item2.questionAnswer"></nz-checkbox-group>
          </div>
        </div>
        <!--多选 end-->

        <!--单选 start-->
        <div class="question-item" *ngIf="item2.type==2">
          <div class="question-title"><span class="require-star">*</span>{{item2.questionTitle}}</div>
          <div class="question-answer">
            <nz-radio-group [(ngModel)]="item2.questionValue">

              <label nz-radio [nzValue]="item3.value" *ngFor="let item3 of item2.questionAnswer">
                <span>{{item3.label}}</span>
              </label>
            </nz-radio-group>
          </div>
        </div>
        <!--单选 end-->

        <!--textarea start-->
        <div class="question-item" *ngIf="item2.type==3">
          <div class="question-title"><span class="require-star">*</span>{{item2.questionTitle}}</div>
          <div class="question-answer">
            <nz-input [(ngModel)]="item2.questionAnswer" [nzType]="'textarea'" [nzRows]="'4'"
                      [nzPlaceHolder]="''"></nz-input>
          </div>
        </div>
        <!--textarea end-->
      </ng-container>
    </div><!--大item end-->
  </div>

css：

/*题目部分*/
.section-content-container{
  background: #FFF;
  padding: 20px;
  box-shadow: 0 1px 4px 0 rgba(29, 43, 54, 0.12);
  border-radius: 2px;
  .section-content{
    .question-type{
      line-height: 24px;
      font-size: 16px;
      word-wrap: break-word;
    }
    .question-title{
      line-height: 24px;
      font-size: 14px;
    }
    .question-answer{
      padding: 10px 0px;
    }
  }
}

js：

// type:   1:多选，2：单选，3：textarea，
question = [
    {
      questionTypeTitle: '一、Type-1',
      childs: [
        {
          questionTitle: '1.您可能使用此功能的场景，请选择：',
          questionAnswer: [
            {label: 'A:1-2:aaa', value: 'A', checked: true},
            {label: 'B:1-2:bbb', value: 'B'},
            {label: 'C:1-2:ccc', value: 'C'},
            {label: 'D:1-2:ddd', value: 'D'},
            {label: 'E其它', value: 'E'},
          ],
          type: 1,
        },
        {
          questionTitle: '2.您希望此功能优化的内容，请选择：',
          questionAnswer: [
            {label: 'A:1-2:aaa', value: 'A', checked: true},
            {label: 'B:1-2:bbb', value: 'B'},
            {label: 'C:1-2:ccc', value: 'C'},
          ],
          type: 1,
        },
      ]

    },
    {
      questionTypeTitle: '二、Type-2',
      childs: [
        {
          questionTitle: '1.现有平台的能力是否满足您需要？ 请选择：',
          questionAnswer: [
            {label: '是', value: 'A'},
            {label: '否；', value: 'B'},
          ],
          questionValue: 'A',
          type: 2,
        },
        {
          questionTitle: '2.现有平台的使用便捷性是否满足您需要？ 请选择：',
          questionAnswer: [
            {label: '是', value: 'A'},
            {label: '否；', value: 'B'},
          ],
          questionValue: null,
          type: 2,
        },
        {
          questionTitle: '3.说明的文档是否满足你需要？ 请选择：',
          questionAnswer: [
            {label: '是', value: 'A'},
            {label: '否；', value: 'B'},
          ],
          questionValue: 'A',
          type: 2,
        },
        {
          questionTitle: '4.如果您有希望平台改进的其它方面？请描述：',
          questionAnswer: '',
          type: 3,
        },
      ]

    }
  ];

注：checkbox和radio有一定的格式要求，其他的都无（字段也可随便改变）；

// label，value，checked：必须这三个字段
[
     {label: 'A:1-2:aaa', value: 'A', checked: true},
     {label: 'B:1-2:bbb', value: 'B'},
     {label: 'C:1-2:ccc', value: 'C'},
]

// label和value
 [
    {label: '是', value: 'A'},
    {label: '否', value: 'B'},
]

修改：
1.build报错，需要针对不同的字段处理，且不能使用.语法；
2.checkbox和radio参考qq.wj，都是block状态，且hover的时候，有背景颜色的；