Как скрыть и показать контент, используя * ngIf

Question

У меня есть некоторые проблемы с * ngIf в Angular.Как мне снова скрыть мой контент?

В моем примере на 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

вы применили его по-другому, в ваших кодах нет никакого способа сделать переменную 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>

это URL-адрес демонстрации

Посмотрите, так как все работает нормально, не стесняйтесь обсуждать это, если это необходимо.

Answer 3

Просто измените ngModels of Place радио на

<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 свяжет значение с ngModel, которое является string , в отличие от флажка, который хранит только True / False.