根据其他人的回答创建一个包含可用问题的调查

Question

我正在尝试创建一个包含 yes/no 个问题的调查，我会有很多问题，所以我想创建一个包含所有信息的数组，然后运行 ngFor 显示我的问题。

它工作得很好。我现在想做的是为我的每个问题添加一个参数，允许我指定是否根据其他问题的答案显示此问题。所以在接下来的数组中，我想在问题 id 1 的条件中添加一些东西，比如 'questions.id.answer == 'YES''，我知道这行不通 questions.id.answer 行不通，但我想你明白了.

  questions = [
    {
      id:0,
      title: "Test 1 ?",
      answer: "",
      condition: ""

    },
    {
      id: 1,
      title: "Test 2 ?",
      answer: "",
      condition: ""
    },
    {
      id: 2,
      title: "Test 3 ?",
      answer: "",
      condition:""
    },
  ];

这是我的 hmtl 文件：

  <ion-list *ngFor="let q of questions; let i = index">
    <ion-list-header>
      <ion-label id="sous_sous_titre" class='ion-text-center'>
        Q{{i}} - {{q.title}}
      </ion-label>
    </ion-list-header>
    <ion-radio-group
    (ionChange)="SelectedType($event,q.id)"
    ([ngModel])="q.answer"
    name="q.answer"
    >
      <ion-item >
        <ion-label>YES</ion-label>
        <ion-radio value="yes"></ion-radio>
      </ion-item>


      <ion-item >
        <ion-label>NO</ion-label>
        <ion-radio value="no"></ion-radio>
      </ion-item>


    </ion-radio-group>
  </ion-list>

  <ion-button (click)="onValidate()">Valider</ion-button>

这里是我的 .ts 文件中的函数：

  SelectedType(event, id:number){
    console.log(id);
    this.questions[id].answer = event.detail.value;

  }

  onValidate(){
    console.log(this.questions);
  }

所以基本上，我想在某处添加一个 *NgIf=""，在其中我可以传递 q.condition，但我不知道要在 condition 中放什么。我想使用 q[i].answer == 'YES' 之类的内容访问问题的答案，但它不起作用 ...

Answer 1

我会通过以下步骤解决这个问题：

第 1 步： 我会使用以下结构，唯一的区别是使用布尔值属性 is_visible 而不是 condition ，我会说我想显示除第三个问题之外的所有问题，当特定业务条件评估为真时，该问题将可见，假设为 "Answering the first question with YES"

questions = [
    {
      id:0,
      title: "Test 1 ?",
      answer: "",
      is_visible: true //instead of using a condition, I will use a boolean parameter

    },
    {
      id: 1,
      title: "Test 2 ?",
      answer: "",
      is_visible: true
    },
    {
      id: 2,
      title: "Test 3 ?",
      answer: "",
      is_visible: false
    },
  ];

第 2 步： 我将按照您的方式将上述问题数组呈现到 HTML 视图中，除了始终检查 is_visible 属性.. 我将使用属性来显示或隐藏问题：

<ion-list *ngFor="let q of questions; let i = index">
 <ng-container *ngIf="q.is_visible"> // This is the only difference here, the question will be rendered only if it's own is_visible equals to true 
    <ion-list-header>
      <ion-label id="sous_sous_titre" class='ion-text-center'>
        Q{{i}} - {{q.title}}
      </ion-label>
    </ion-list-header>
    <ion-radio-group
    (ionChange)="SelectedType($event,q.id)"
    ([ngModel])="q.answer"
    name="q.answer"
    >
      <ion-item >
        <ion-label>YES</ion-label>
        <ion-radio value="yes"></ion-radio>
      </ion-item>
      <ion-item >
        <ion-label>NO</ion-label>
        <ion-radio value="no"></ion-radio>
      </ion-item>
    </ion-radio-group>
   </ng-container>
  </ion-list>

  <ion-button (click)="onValidate()">Valider</ion-button>

Step3: 现在，当终端用户回答任何问题时，SelectedType 方法将被执行，我将讨论隐藏和显示其他问题的逻辑这里：

 SelectedType(event, id:number){
    console.log(id);
    this.questions[id].answer = event.detail.value;

    // Hide the third question if the first question is Yes.
     switch (id) {
      case 0: // this is the first question
           if(this.questions[id].answer == 'Yes') // Show the third question
              this.questions[2].is_visible = true;
           else // Hidethe third question incase the user changed his mind ;)
              this.questions[2].is_visible = false;
      break;

      default:
       break;
     }
  }

然后Angular会自动检测问题数组的变化，结果第三个问题会根据用户的回答显示或隐藏。将条件逻辑放入打字稿并让您的视图根据评估复杂条件的结果进行操作总是更容易。

如果对您有帮助，请标记为正确并点赞。祝一切顺利！

根据其他人的回答创建一个包含可用问题的调查

Create a survey with question that are available depending of answer of others

angular

ionic-framework

ngfor

angular-ng-if

survey