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

Question

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

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

当我单击“2”和 "at home" 时，我的输出显示。但是我希望它再次消失，例如，如果我说 "in the gym".

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。当单选按钮的选择发生变化时，这两个属性也会更新，条件将为 re-evaluated.

Answer 2

只需将 Place radio 的 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 s 更改为

*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

看看，因为这工作正常，如果需要，请随时对此进行讨论。

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

How to hide and show content using *ngIf

show-hide

angular-ng-if

angular