Javascript @Input ngOnChanges使用传入的数组生成一个新的嵌套数组-如何避免这种情况？

我对Angular非常陌生，我不确定我的代码中的

@Input（）

和

ngochanges（）

是否有问题，或者我的整个设置是否不正确

我的设置如下：

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

我的父组件拥有一个

filtercomponent

，它有一个按钮“apply filter”（使用我服务中的逻辑）和一个

tablecomponent

来显示数据

过滤工作正常，我确实获得了所需的过滤数据，但如何将此数组传递给

tableviewcomponent

？如果我通过

@Input（）

执行操作并运行

ngOnChanges

我会得到一个嵌套数组

我如何解决这个问题

父TS:

tabellendant:any[]；
构造函数（私有筛选器服务：BdService）{}
ngOnInit（）{}
onDisplayTable（过滤器：BdFilter）{
this.filterservice.getBdTabelle（filter.subscribe）(
（日期）=>{
console.log（'tabellendantenneu'，daten）；
this.tabellendant=daten；
},
（error）=>console.log（'error:'，error），
() => { }
);
}

包含

过滤器组件

和

表格组件

的父HTML:

当我记录它时，我确实得到了所需的表，如：

Array（148）[{…}，{…}，{…}，{…}，]

现在，当使用

[tabellendan]=“tabellendan”

和使用

@Input（）

时

子TS（表逻辑）：

@Input（）tabellendant:any[]；
ngOnChanges（…选项卡：任何）{
this.dataSource=新MatTableDataSource（tabellendan）；
console.log（'tabellendant'，tabellendant）；
}

…我确实得到了

ngOnChanges

方法（

currentValue

，

firstChange

和

previousValue

）的结果，该方法也保存了我的数据数组，但我如何只获取单个数组

---

非常感谢您的帮助。

ngOnChanges的实现是：

因此，您的代码应该是：

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

ngOnChanges（更改：simpleChanges）{
//如果“tabellendant”已更改，它将作为“changes”上的字段提供。
如果（更改标签栏）{
this.dataSource=新MatTableDataSource（changes.tabellendan.currentValue）；
}
}

另一种方法是将RxJS与angular提供的

async

管道一起使用

您可以分配可观察对象，而不是订阅此.filterservice.getBdTabelle（filter）：

tabellenDaten$: Observable<any[]>;

constructor(private filterservice: BdService) {}

ngOnInit() {}

onDisplayTable(filter: BdFilter) {
  this.tabellenDaten$ = this.filterservice.getBdTabelle(filter);
}

最后，您不需要将数组分配给MatTableDataSource，但可以将数组直接传递给mat表：

<mat-table [dataSource]="tabellenDaten">

---

<>你应该考虑不要在组件中订阅你的可观察到的东西，除非你手动订阅它。否则，请使用

async

并让管道为您订阅/取消订阅。

也非常感谢您！我以前见过这种方法，但因为我是一个真正的初学者，并且喜欢了解我在做什么，所以我很难将其他帖子用于我自己的代码。然而你的答案很有效，我同意这个！！！但是我想保持第一个答案成为（第一个）被接受的答案，因为我希望它也能帮助其他初学者真正理解基础知识——就像它帮助了我一样。别担心，我明白了！RxJs使用起来不是那么简单，但你应该从一开始就考虑使用它的特性。我看到了很多问题，如内存泄漏、复杂性等，这是因为

的错误/不当使用。subscribe（）

async

管道并不难理解。它只订阅您的可观察和返回结果。然后，当组件被销毁时，管道取消订阅可观察的避免，以保持连接打开或手动关闭它（更少的技术代码）：）你是对的-它只是很多新的东西要考虑，所以我很高兴能找到帮助和不同的方法，但是我肯定会研究所有的问题。

<mat-table [dataSource]="tabellenDaten">