我对Angular还是很陌生,我不确定我是否对代码中的@Input()ngOnChanges()做错了,或者我的整个设置都不正确。

我的设置如下:

我有一些API生成的数据。我的服务获取数据并拥有进行一些过滤的逻辑。

我的父组件拥有一个filtercomponent,它具有一个按钮“应用过滤器”(使用我的服务中的逻辑)和一个tablecomponent以显示数据。

过滤工作正常,我确实获得了所需的过滤数据,但是如何仅将此数组传递给tableviewcomponent?如果通过@Input()执行并运行ngOnChanges,则会得到一个嵌套数组。

我该如何解决?

家长TS:

tabellenDaten: any[];

constructor(private filterservice: BdService) {}

ngOnInit() {}

onDisplayTable(filter: BdFilter) {
  this.filterservice.getBdTabelle(filter).subscribe(
    (daten) => {
      console.log('tabellendatenneu', daten);
      this.tabellenDaten = daten;
    },
    (error) => console.log('error: ', error),
    () => { }
  );
}


包含filtercomponenttablecomponent的父HTML:

<div class="v-flex-container-filter">
  <app-allfilter-bd
    (emitFilter)="onDisplayTable($event)"></app-allfilter-bd>
</div>

<div class="v-flex-container">
  <app-tabelle
    [tabellenDaten]="tabellenDaten"></app-tabelle>
</div>


当我登录时,确实得到了所需的表,例如:Array(148)[{...}, {...}, {...}, ...]

现在,当使用[tabellenDaten]="tabellenDaten"并使用@Input()时...

子TS(表逻辑):

@Input() tabellenDaten: any[];

ngOnChanges(...tabellenDaten: any) {
  this.dataSource = new MatTableDataSource<any>(tabellenDaten);
  console.log('TABELLENDATEN', tabellenDaten);
}


...我确实得到了ngOnChanges方法(currentValuefirstChangepreviousValue)的结果,该方法还保存了我的数据数组,但是如何仅获得单个数组呢?

很感谢任何形式的帮助。

最佳答案

ngOnChanges的实现是:ngOnChanges(changes: SimpleChanges): void

因此,您的代码应为:

ngOnChanges(changes: simpleChanges) {
  // if 'tabellenDaten' has changed it will be available as a field on 'changes'.
  if (changes.tabellenDaten) {
    this.dataSource = new MatTableDataSource<any>(changes.tabellenDaten.currentValue);
  }
}

关于javascript - @Input ngOnChanges使用传入的数组生成一个新的嵌套数组-如何避免这种情况?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57159452/

10-12 00:49
查看更多