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

我在角度上对*ngIf有一些问题。 如何再次隐藏我的内容

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

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

在这里，我给出了NGM模型

<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>

2
3.
4.
在家里
在健身房

在这里，我和*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>

1.
{{home[0][0][1]}
{{home[0][0][0]}
{{home[0][1][0]}

但如果我点击另一个单选按钮，它们不会隐藏。

---

输出永远保持不变

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

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

<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

和

location

。当单选按钮的选择更改时，这两个属性也将更新，并重新评估条件。

只需将ngModels of Place radios更改为

在家里
在健身房

并将所有*ngIf更改为

*ngIf=“split2&&place==“home”

---

关键是RadioButton会将值绑定到ngModel，ngModel是字符串，这与复选框store just True/False不同。

您以不同的方式应用它，代码中没有办法使split1和home1变量为True

我刚刚在你的app.componenet.html中做了更改

下面是您更正的代码

  <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>

你想多久坐一次火车？
2.
3.
4.
我想训练
在家里
在健身房

这是你的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>

1
示例文本
示例文本
示例文本

这是

看一看，因为这很好用， 如果需要的话，可以自由讨论

 <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>