如何使用“接口”将数据追加到表中？使用Typescript在Angular 6中

Question

我是新手。我正在尝试使用Typescript在angular 6中进行API调用。我陷入了将数据附加到表中的麻烦。

请参阅：Codepen

我正在使用一个角形材料表，该表包含一个PeriodicElement接口，一个数组，const ELEMENT_DATA: PeriodicElement[]和一个组件类。

我不知道如何从班级内部添加到ELEMENT_DATA，因为它在班级外部。

有人可以帮我解决这个问题吗？

Answer 1

我能够重现您的问题并予以解决。有关解决方案，请参见https://stackblitz.com/edit/angular-fhngg8。

我已经完成的步骤：

1. 将ELEMENT_DATA移动到班级
2. 在html displayedColumns
中定义

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

1. 添加到组件：providers: [HttpClient],
2. 已添加到模块中：imports:[ BrowserModule, FormsModule, MatTableModule, BrowserAnimationsModule, HttpClientModule ],
3. 在响应中，您不需要每个响应，因为您的数据是数组subscribe((response: any) => this.dataSource = response.data[0])