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

只需将ng电台的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

看看，因为它工作正常，如有需要，可以随时进行讨论。

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

3 个答案: