У меня есть модальный компонент, который содержит меню с двумя вкладками. Я использовал Angular {amp}lt;mat-tab-group{amp}gt; для того же. Моя первая вкладка содержит форму пользователя, а вторая вкладка изначально отключена. Что я хочу, когда пользователь успешно отправляет форму и длина массива данных становится больше единицы, вторая вкладка должна включаться автоматически. В противном случае его следует отключить, если данных не существует. Так как я новичок в angular, я попробовал следующий подход:

.html

 {amp}lt;mat-tab-group{amp}gt; {amp}lt;mat-tab{amp}gt; ...... {amp}lt;button mat-raised-button color="#217fa2" class="btn btn-success addReceiver" type="submit" (click)="addReceiverAccount(form)" [disabled]="loading"{amp}gt; {amp}lt;!-- {amp}lt;span [disabled]="getCard"{amp}gt;{{getCard}}{amp}lt;/span{amp}gt; --{amp}gt; {amp}lt;span{amp}gt;{{ loading? 'Saving...' : 'Add User Card' }}{amp}lt;/span{amp}gt; {amp}lt;/button{amp}gt; {amp}lt;/mat-tab{amp}gt; {amp}lt;mat-tab [disabled]="getCard"{amp}gt; ..////// data to be displayed in this tab /////.... {amp}lt;/mat-tab{amp}gt; {amp}lt;/mat-tab-group{amp}gt; 

.ts

 async addReceiverAccount(form){ if(this.ImageBRequired === false {amp}amp;{amp}amp; this.ImageFRequired === false){ this.condition = form.valid } else { this.condition = false; } if(this.condition){ this.credit['AccountNumber'] = this.credit['AccountNumber'].trim(); this.loading = true; this.getCard = true; let body = await this.crypto.encode(this.credit, environment.request_encode_key); this.request.POST('add-credit', {body: body}).subscribe(response ={amp}gt; { this.loading = false; console.log(response); if(response['success'] === true) { // this.activeModal.dismiss('Cross Click'); // this.snack.notify(response['message'], 1); this.getCardInfo(); } }, error ={amp}gt; { this.loading = false; console.log(error); }) } } 

Следующий подход, похоже, не работает. Пожалуйста, помогите решить то же самое.