我对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),
() => { }
);
}
包含
filtercomponent
和tablecomponent
的父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
方法(currentValue
,firstChange
和previousValue
)的结果,该方法还保存了我的数据数组,但是如何仅获得单个数组呢?很感谢任何形式的帮助。
最佳答案
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/