如何使用 *ngIf 隐藏和显示内容

Question

我对 Angular 中的 *ngIf 有一些问题。 如何再次隐藏我的内容？

在我在 Stackblitz 的示例中，我想在两个单选按钮未激活后再次隐藏我的内容。

当我单击“2”和“在家”时，会显示我的输出。但我希望它再次消失，例如，如果我说“在健身房”。

https://stackblitz.com/edit/angular-hcmstg

这里我给出了 ngModel

<label class="radio-inline"><input [(ngModel)]="split2" type="radio" name="radio1" value="two">2</label>
<label class="radio-inline"><input [(ngModel)]="split3" type="radio" name="radio1" value="three">3</label>
<label class="radio-inline"><input [(ngModel)]="split4" type="radio" name="radio1" value="four">4</label>



<label class="radio-inline"><input [(ngModel)]="home1" type="radio" name="radio2" value="home">at home</label>
<label class="radio-inline"><input [(ngModel)]="gym1" type="radio" name="radio2" value="gym">in the gym</label>

在这里我使用 * ngIf

<tr>
    <th scope="row">1</th>
    <td *ngIf="split2 && home1">{{home[0][0][1]}}</td>
    <td *ngIf="split2 && home1">{{home[0][0][0]}}</td>
    <td *ngIf="split2 && home1">{{home[0][1][0]}}</td>
</tr>

但如果我单击另一个单选按钮，它们不会隐藏。 输出永远保留

Answer 1

问题在于模型只是映射值，它们实际上并不关心元素是否保持选中状态。因此，您需要做的是多次重复使用相同的模型，并根据您选择的内容让输入元素设置不同的值。

例如，您可以像这样修改输入：

<label><input [(ngModel)]="repeats" type="radio" name="repeats" value="2">2</label>
<label><input [(ngModel)]="repeats" type="radio" name="repeats" value="3">3</label>
<label><input [(ngModel)]="repeats" type="radio" name="repeats" value="4">4</label>

<label><input [(ngModel)]="location" type="radio" name="location" value="home">at home</label>
<label><input [(ngModel)]="location" type="radio" name="location" value="gym">in the gym</label>

第一组将模型属性repeats 设置为2、3 或4。第二组将模型属性location 设置为home 或gym。

有了这些信息，您就可以调整您的条件：

<tr>
  <th scope="row">1</th>
  <td *ngIf="repeats == 2 && location == 'home'" (change)="show == !show">{{home[0][0][1]}}</td>
  <td *ngIf="repeats == 2 && location == 'home'">{{home[0][0][0]}}</td>
  <td *ngIf="repeats == 2 && location == 'home'">{{home[0][1][0]}}</td>
</tr>

所以基本上，您现在只检查两个属性repeats 和location。当单选按钮的选择发生变化时，这两个属性也将更新，并且将重新评估条件。

Answer 2

只需将 Place radios 的 ngModels 更改为

<label class="radio-inline card-img-top"><input [(ngModel)]="place" ng-model="example2" type="radio" name="radio2" value="home">at home</label> <label class="radio-inline card-img-top"><input [(ngModel)]="place" type="radio" name="radio2" value="gym">in the gym</label>

并将所有 *ngIf 更改为

*ngIf="split2 && place === 'home'"

关键是 RadioButton 会将值绑定到 string 的 ngModel，这与仅存储 True/False 的复选框不同。

Answer 3

你以不同的方式应用它，你的代码中没有办法让 split1 和 home1 变量为真，

我刚刚对您的 app.componenet.html 进行了更改

https://stackblitz.com/edit/angular-smttco

以下是您的更正代码

  <div class="container d-sm-flex list-group-item bs-popover-top btn-group-vertical">
        <h4 class="card-img-top btn-group-vertical">How often you want to go train?</h4>
        <div class="card-img-top">
            <label class="radio-inline card-img-top"><input [(ngModel)]="split" type="radio" name="radio1" value="two">2</label>
            <label class="radio-inline card-img-top"><input [(ngModel)]="split" type="radio" name="radio1" value="three">3</label>
            <label class="radio-inline card-img-top"><input [(ngModel)]="split" type="radio" name="radio1" value="four">4</label>
        </div>
    </div>

    <div class="container d-sm-flex list-group-item bs-popover-top btn-group-vertical">
        <h4 class="card-img-top btn-group-vertical">I want to train</h4>
        <div class="card-img-top">
            <label class="radio-inline card-img-top"><input [(ngModel)]="home" ng-model="example2" type="radio" name="radio2" value="home">at home</label>
            <label class="radio-inline card-img-top"><input [(ngModel)]="home" type="radio" name="radio2" value="gym">in the gym</label>
        </div>
    </div>

这是你的 ngif

 <th scope="row">1</th>
      <td *ngIf="split == 'two' && home == 'home'" (change)="show == !show">sample text</td>
      <td *ngIf="split == 'two' && home == 'home'">sample text</td>
      <td *ngIf="split == 'two' && home == 'home'">sample text</td>

这是demo url

看看，因为它工作正常， 如有需要，请随意讨论。