创建一个调查问卷，其中的问题可根据其他人的回答而定。

Question

我想创建一个带有yesno问题的调查问卷，我会有很多问题，所以我想创建一个包含所有信息的数组，然后运行 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

我将通过应用这些步骤来解决这个问题。

第一步： 我会使用下面的结构，唯一不同的是使用一个布尔值属性 is_visible 而不是 condition我想说的是，除了第三个问题，我想显示所有的问题，当一个特定的业务条件被评估为真时，该问题将被显示，让它成为 "用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
    },
  ];

第二步，我将上述问题数组渲染成HTML视图，就像你所做的那样，只是始终检查is_visible属性..: 我将上述问题数组渲染成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 方法，我在这里讨论一下隐藏和显示其他问题的逻辑，然后Angular会自动检测问题数组的变化，结果根据用户的回答显示或隐藏第三个问题。

 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会自动检测到问题数组的变化，结果第三个问题会根据用户的回答被显示或隐藏。 把条件逻辑放到typescript中，让你的视图根据评估复杂条件的结果来操作，总是更容易。

如果这对你有帮助，请标记为正确并加注。祝您一切顺利!