html - Angular 处理条件驱动形式

Question

我对 Angular 很陌生，我正在使用模板驱动的表单。 我以单选按钮的形式有两个问题(如下所示)，我的用例是，一旦用户回答了这两个问题，根据他/她的回答，我需要显示另一组问题。 因此，如果两个问题中任何一个的答案是"is"，那么我需要显示另一组问题。如果两个问题的答案都是“否”，那么我不需要显示另一组问题。请帮助如何实现它。

我的模板和 component.ts 文件如下所示。我尝试在条件下使用“*ngIf” *ngIf="Question1 || Question2"，但这不起作用，因为一旦第一个问题回答"is"，它就会显示带有文本“显示其余问题”的部分。请参阅下面我的示例代码。我希望当用户回答这两个问题时，根据响应，仅应显示带有文本“显示其余问题”或“不显示其余问题”的 div。

<div class="form-group">
          <div class="form-group col-md-12">
            <label>Question 1?</label>
            <input type="radio" name="Question1" [(ngModel)]="Question1" value="yes">Yes
            <input type="radio" name="Question1" [(ngModel)]="Question1" value="no">No
          </div>
          <div class="form-group col-md-12">
            <label>Question 2?</label>
            <input type="radio" name="Question2" [(ngModel)]="Question2" value="yes">Yes
            <input type="radio" name="Question2" [(ngModel)]="Question2" value="no">No
          </div>
</div>  

 <div align="center" *ngIf="Question1 || Question2">
          Show rest questions
        </div>

 <div align="center" *ngIf="Question1 && Question2">
          Don't show rest questions
        </div>

下面是我的部分组件.ts

export class Component1 implements OnInit {
  public Question1:string;
  public Question2:string;
}

Answer 1

这个 value="yes" 会将所选值设置为字符串，如果您想将该值设置为 true/false 尝试这样

<div class="form-group">
          <div class="form-group col-md-12">
            <label>Question 1?</label>
            <input type="radio" name="Question1" [(ngModel)]="Question1" [value]="true">Yes
            <input type="radio" name="Question1" [(ngModel)]="Question1" [value]="false">No
          </div>
          <div class="form-group col-md-12">
            <label>Question 2?</label>
            <input type="radio" name="Question2" [(ngModel)]="Question2" [value]="true">Yes
            <input type="radio" name="Question2" [(ngModel)]="Question2" [value]="false">No
          </div>
</div>

然后你可以使用 ngIf 显示另一个像这样的部分

 <div align="center" *ngIf="Question1 || Question2; else noQuestions ">
          Show rest questions
  </div>


<ng-template #noQuestions>
         .....
</ng-template>

Question1 || Question2 will become true of any of the answer is selected yes , or you can show the rest in both of the answer is yes like this Question1 && Question2

demo 🚀🚀

已更新!!⚡⚡

将值设置为 true/false 将限制我们对所选案例的检查

<div class="form-group">
          <div class="form-group col-md-12">
            <label>Question 1?</label>
            <input type="radio" name="Question1" [(ngModel)]="Question1" value="yes">Yes
            <input type="radio" name="Question1" [(ngModel)]="Question1" value="no">No
          </div>
          <div class="form-group col-md-12">
            <label>Question 2?</label>
            <input type="radio" name="Question2" [(ngModel)]="Question2" value="yes">Yes
            <input type="radio" name="Question2" [(ngModel)]="Question2" value="no">No
          </div>
</div>  


<div *ngIf="Question1 === 'yes' && Question2 === 'yes' else both">
  both questions is selected as yes
</div>

<ng-template #both>
  <ng-container *ngIf="Question1 === 'yes' || Question2 === 'yes' else oneAsNo">
      one of the questions is selected as yes
  </ng-container>
</ng-template>

<ng-template #oneAsNo>
<ng-container *ngIf="Question1 === 'no' || Question2 === 'no' else none">
      one of the questions is selected as no
  </ng-container>
</ng-template>

<ng-template #none>
    none of the questions
</ng-template>

demo 🌟🌟