Question

我希望在所有＆＃39;全部＆＃39;单击单选按钮。我想显示只包含＆＃39;男性＆＃39;单击男性单选按钮时。而且我想显示只包含＆＃39;女性＆＃39;单击女性单选按钮时。它显示的只是一个空白页面。我的代码是：

<form>
    <input type="radio" name="r" [(ngModel)] = "chk1"> All
    <input type="radio" name="r" [(ngModel)] = "chk2"> male
    <input type="radio" name="r" [(ngModel)] = "chk3"> female
</form>

<table>
    <tr>
        <th>Name</th>
        <th>Gender</th>
    </tr>
    <tr *ngIf = "(chk1 || chk2">
        <td>abc</td>
        <td>male</td>
    </tr>
    <tr *ngIf = "chk1 || chk3">
        <td>xyz</td>
        <td>female</td>
    </tr>
</table>

Answer 1

这不是你应该如何使用单选按钮。所有输入都应绑定到同一个变量，但具有不同的值：

  <form>
    <label><input type="radio" name="o" value="all" [(ngModel)]="option" /> All</label>
    <label><input type="radio" name="o" value="male" [(ngModel)]="option" /> Male</label>
    <label><input type="radio" name="o" value="female" [(ngModel)]="option" /> Female</label>
  </form>

  Chosen option: {{ option }}

这样，您可以使用

*ngIf="option === 'male' || option === 'all'"

或

*ngIf="option === 'female' || option === 'all'"

请注意，这样做非常低效。每次选项更改时，您最好从控制器创建一个过滤的数组副本（感谢(ngModelChange)="createFilteredCopy()"），然后迭代过滤后的副本，而不使用任何ngIf。

* ngIf有多个条件不起作用

1 个答案: