javascript - Angular-elementti tuhoutuu mat-tab-groupissa, kun uusi välilehti lisätään

Minulla on mat-tab-ryhmä, joka täytetään taulukosta. Lisään uusia kohteita taulukkoon dynaamisesti, ja välilehtien sisältö on Angular Elements -komponentteja.

Kun lisään uuden elementin, kaikki toimii hyvin ja näen lisätyn elementin, mutta kun lisään uuden elementin, edellinen elementti tuhoutuu ja välilehden sisältö näyttää tyhjältä.

Olen tarkastellut elementtiä, kun se lisätään, ja näen, että se toimii täydellisesti, mutta kun lisään uuden elementin, näen edellisen katoavan DOMista.

Olen yrittänyt lisätä tavallista tekstiä välilehtiin Angular Elements -komponenttien sijaan, ja kaikki toimii odotetusti, ja voin siirtyä välilehtien välillä eteen- ja taaksepäin.

Välilehtiryhmän HTML on tämä:

<mat-tab-group [selectedIndex]="selectedTab">
  <mat-tab *ngFor="let tab of tabs; let i = index" [label]="tab.name">
    <div [innerHTML]="tab.content"></div>
  </mat-tab>
</mat-tab-group>

Koodi, joka lisää uuden välilehden, on tämä:

this.tabs.push({
  name: this.options[opt].name,
  content: this.domSanitizer.bypassSecurityTrustHtml('<osm-'+this.options[opt].content+'></osm-'+this.options[opt].content+'>')
} as MainTab);
this.selectedTab = this.tabs.length -1;

options-taulukko on luettelo mahdollisista uusista välilehdistä, jotka voidaan lisätä:

options = [
  {id: 1, name: 'Sell', content: 'sell'},
  {id: 2, name: 'Admin', content: 'admin'}
];

Ja osm-sell ja osm-admin -komponentit on luotu Angular Elements -komponentteina (kuten tässä oppaassa on kuvattu).

Kaikki koodi on Githubissa.

Odotetun tuloksen pitäisi olla se, mitä tapahtuu ensimmäisessä vaiheessa: uusi välilehti lisätään, jossa komponentti on sisällön mukana, mutta se tuhoutuu, kun lisätään uusi.

Live-testi on osoitteessa https://tpv.osumi.es

Kiitos!!

Vastaus #1

Koska taulukkoon lisääminen laukaisee muutoksen seurannan, eikä välilehtesi ole seurattu oikein, joten kehys piirtää ne uudelleen.

Yritä käyttää mukautettua rataa toiminnon avulla:

*ngFor="let tab of tabs; let i = index; trackBy: customTB"

Sinun TS:ssäsi

customTB(index, tab) {
  return tab.id;
}