Как остановить выполнение функций компонента в других вкладках для зацикленных вкладок в Angular - Материал

Question

У меня есть эта странная проблема в Angular.

<md-tab-group>
  <md-tab *ngFor="let subject of subjects" label="subject.name">
   <my-form></my-form>
  </md-tab>
</md-tab-group>

Примечание: размер предметов является динамическим, он может быть больше 2 и более.

мой-form.component.html

<input *ngIf="isShow" type="text"></input>
<button (click)="toggleInputShow()"></button>

мой-form.component.ts

isShow= false;

onInit() {}

toggleInputShow() {
 this.isShow = !this.isShow;
}

Проблема, например, в том, что у меня 3 предмета, поэтому у меня отображается 3 вкладки. Затем я щелкаю по второй вкладке, затем нажимаю кнопку, чтобы отобразился ввод. Но потом, когда я перешел на первую вкладку, ввод также показывает.

Что я хочу, так это если я покажу входные данные на второй вкладке, они будут показаны только на второй вкладке и скрыты на первой и третьей вкладках.

Кто-нибудь может мне с этим помочь? Довольно пожалуйста.

Answer 1

Я думаю, что вы можете достичь этим путем.

 <md-tab-group>
    <md-tab *ngFor="let subject of subjects" label="subject.name">
      <my-form></my-form>
    </md-tab>
 </md-tab-group>

мой-form.component.ts

<input *ngIf="subject.isShow" type="text"></input>
<button (click)="toggleInputShow(subject)"></button>

мой-form.component.ts

  toggleInputShow(subject) {
    subject.isShow = !subject.isShow;
  }

Может быть по умолчанию вам нужно инициализировать свойство isShow в каждой теме.