mat-tab с использованием * ngIf причин для дополнительных причин значков ExpressionChangedAfterItHasBeenCheckedError - PullRequest
Новая
       40

mat-tab с использованием * ngIf причин для дополнительных причин значков ExpressionChangedAfterItHasBeenCheckedError

0 голосов
/ 01 апреля 2020

Я пытаюсь условно добавить значок к ярлыку вкладки мат, чтобы использовать его для удаления вкладки, так же, как работают вкладки Google Chrome: 

<mat-tab *ngFor="let tab of tabs; let i = index"
label="{{tab.id}}">

        <ng-template mat-tab-label>
        {{tab.value}}

        <mat-icon *ngIf="i > 0" class="tab-icon" //<< the problem is this *ngIf
                (click)="removeTab(i)">{{tab.icon}}</mat-icon>
        </ng-template>

        <record-search *ngIf="i == 0" (onOpenEmergencyCase)="openCase($event)" class="tab-icon"></record-search>
        <emergency-record *ngIf="i > 0" [emergencyCaseId]="tab.emergencyCaseId" class="tab-icon"></emergency-record>

</mat-tab>

Но это вызывает a ExpressionChangedAfterItHasBeenCheckedError.

Проблема связана только с приведенной ниже строкой и только с * ngIf:

<mat-icon *ngIf="i > 0" class="tab-icon"

Если я удаляю * ngIf, он работает правильно. Есть (возможно) связанный с этим вопрос здесь и открытый вопрос по github здесь , но я не могу понять, отличается ли это от других?

Мой компонент код: 

  tabs = [];

  selected = new FormControl(0);

  ngOnInit()
  {
    this.tabs.push({"id":0, "value": "Search", "emergencyCaseId": 0, "icon":""});
  }

Я также пытался безрезультатно: 

  tabs = [{"id":0, "value": "Search", "emergencyCaseId": 0, "icon":""}];

  selected = new FormControl(0);

В настоящий момент я пытаюсь обойти это, добавив проверку в мою функцию removeTabs (): 

  removeTab(index: number) {
    //TODO find out why the ngif in the mat-label causes and error and fix
    if(index > 0 && index < this.tabs.length){
      this.tabs.splice(index, 1);
    }
  }

Что работает, однако это означает, что на содержимое моего ярлыка влияет (потому что теперь есть пустой значок), и мне нужно взломать CSS, чтобы добавить поле для выравнивания ярлыка :

enter image description here

Вероятно, я смогу соединить блики стека, если это тоже поможет ..

...