Question

我有一个简单的表格，包含角度和打字稿。我正在将表数据从父类发送到子类（包括表），在此示例中，数据名称为 _domainData 。它可以正确获取数据，但是我想在表上显示它，但我不知道如何将其分配给我的主表数据变量 domain_Data 。

如示例中所示：如果我用this.domain_Data = this._domainData;方法说ngOnInit()。

@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;
  }

}

，错误是Type：BehaviourSubject无法分配给Domain []类型。类型“ BehaviourSubject”中缺少属性“包含”

正如我所说的，我的主表数据变量是domain_Data：

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

Answer 1

您需要订阅并从BehaviorSubject获取值

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

或者，很少有人评论，您可以使用subscribe管道在模板中async：

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

通常，如果您不需要处理组件中的数据，最好使用async管道，因为它可以自动取消订阅。

Answer 2

我来晚了一点，但我想补充有关@Aragorn答案的2条其他信息：

在带有ChangeDetectionStrategy.OnPush的组件模板中使用异步管道时要小心，因为它会完全强制组件触发生命周期检测更改，就像默认策略一样。
第二个重要信息：如果组件被销毁，别忘了取消订阅，否则，如果您从未解决BehaviourSubject（在这里只需执行“下一步”操作），您的订阅仍会继续：

subscription: ISubscription;

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

然后在onDestroy中：

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

无法分配给类型错误的Angular BehaviourSubject问题

2 个答案: