Website-Suche

html - Problem mit Angular BehaviourSubject, der dem Typ nicht zuweisbar ist

Ich habe eine einfache Tabelle mit Angular und TypeScript. Ich sende Tabellendaten von der übergeordneten Klasse an die untergeordnete Klasse (die die Tabelle enthält), und in diesem Beispiel heißt die Datenvariable _domainData. Die Daten werden korrekt übernommen, aber ich möchte sie in der Tabelle anzeigen und ich weiß nicht, wie ich sie meiner Haupttabellendatenvariable domain_Data zuweisen kann.

Wie im Beispiel: wenn ich this.domain_Data=this._domainData; in der ngOnInit()-Methode sage.

@Component({
  selector: 'mg-domain-display',
  templateUrl: './domain-display.component.html',
  styleUrls: ['./domain-display.component.scss']
})
export class DomainWhiteListingDisplayComponent implements OnInit {

  private _domainData = new BehaviorSubject<Domain[]>([]);

  displayedColumns = ['id', 'domain'];
  domain_Data: Domain[] = [];

  @Input()
  set domainData(value: Domain[]) {
    this._domainData.next(value);
  }
  get domainData() {
    return this._domainData.getValue();
  }

  constructor(private globalSettingService: GlobalSettingsService, private dialog: MatDialog) {
  }

  ngOnInit() {
    this.domain_Data = this._domainData;
  }

}

Und der Fehler lautet Typ: BehaviourSubject ist nicht dem Typ Domain[] zuweisbar. Die Eigenschaft 'includes' fehlt im Typ 'BehaviourSubject'

Wie ich sagte, ist meine Haupttabellendatenvariable domain_Data:

<mat-table #table [dataSource]="domain_Data">

Antwort #1

Sie müssen sich anmelden und den Wert vom BehaviorSubject erhalten

  ngOnInit() {
    this._domainData.subscribe((data) => this.domain_Data = data);
  }

Alternativ, wie wenige kommentiert haben, können Sie im Template mit der async-Pipe subscribe:

<mat-table #table [dataSource]="domain_Data | async">

Im Allgemeinen, wenn Sie sich nicht mit Daten in der Komponente beschäftigen müssen, ist es am besten, die async-Pipe zu verwenden, da sie sich automatisch um das Abbestellen kümmert.

Antwort #2

Ich bin ein bisschen zu spät angekommen, aber ich möchte 2 zusätzliche Informationen zu @Aragorns Antwort hinzufügen:

  • Seien Sie vorsichtig beim Verwenden der async-Pipe in der Vorlage einer Komponente mit ChangeDetectionStrategy.OnPush, da sie die Komponenten vollständig dazu zwingt, Lifecycle-Erkennungsänderungen genauso oft auszulösen wie die Standardstrategie.

  • Zweite wichtige Information: Vergessen Sie nicht, die Anmeldung zu kündigen, wenn Ihre Komponente zerstört wird, sonst bleibt das Abonnement bestehen, wenn Sie das BehaviourSubject nie auflösen (hier führen Sie nur 'next'-Operationen aus):

subscription: ISubscription;
this.subscription = this._domainData.subscribe((data) => this.domain_Data = data);

dann in onDestroy :

ngOnDestroy() {
   if (this.subscription) {
      this.subscription.unsubscribe();
   }
}

Verwandte Artikel