typescript 有什么方法可以在 Angular 材料表中动态添加列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47686228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Any way to dynamically add columns in Angular material table?
提问by BleachedAxe
I am having a problem creating tables dynamically with Angular Material tables. As the table depends on an interface, I have a fixed number of columns. What I want is to have a dynamic table depending on response from the server. Is there any way to dynamically create the interface or something? Because the way the application is designed is sometimes there would be 2 columns and some times 3 and so on depending on the size of the array. My interface currently looks like
我在使用 Angular Material 表动态创建表时遇到问题。由于表依赖于接口，我有固定数量的列。我想要的是根据服务器的响应有一个动态表。有没有办法动态创建界面什么的？因为应用程序的设计方式有时会有 2 列，有时会有 3 列，依此类推，具体取决于数组的大小。我的界面目前看起来像
export interface Data{
file:any,
typea:any,
typeb:any
}
With this interface I have 3 columns. There are minimum 3 columns but depending on data there could be more than 3. I am not able to achieve this, any help would be appreciated.
有了这个界面，我有 3 列。最少有 3 列，但根据数据可能会超过 3 列。我无法实现这一点，任何帮助将不胜感激。
回答by Shane
The easiest way to do this is to include all possible columns in an array (definedColumns), and iterate over it for the header & cell definitions.
最简单的方法是将所有可能的列包含在一个数组 ( definedColumns) 中，并对其进行迭代以获取标题和单元格定义。
Then for the columns you want to show conditionally, you can control which are displayed by having a separate array that contains a string list of the columns you want to actually show (columnsToDisplay). Simply adding and removing columnIds from this list will result in the table updating with the appropriate columns.
然后，对于您想要有条件地显示的列，您可以通过拥有一个单独的数组来控制显示哪些列，该数组包含您想要实际显示的列的字符串列表 ( columnsToDisplay)。简单地从该列表中添加和删除 columnIds 将导致使用适当的列更新表。
<table mat-table [dataSource]="data" class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>
There's a live example of this given on the angular material website, see "Table dynamically changing the columns displayed " on their examples page here - https://material.angular.io/components/table/examples
在角度材料网站上有一个现场示例，请参阅此处的示例页面上的“表格动态更改显示的列” - https://material.angular.io/components/table/examples
Note: For more advanced examples, like if you needed to pass a TemplateRef for your cell and header definitions, you'll probably want to check out Angular Material's CDK.
注意：对于更高级的示例，例如如果您需要为单元格和标题定义传递 TemplateRef，您可能需要查看 Angular Material 的 CDK。
You can dynamically add and remove columns from the table using Angular's CDK API. If you add #tableto your mat-tableelement then you can have your component use it as a @ViewChild. Then you can use this.table.addColumnDefand pass your new column. See https://material.angular.io/cdk/table/api#CdkColumnDeffor more details.
您可以使用 Angular 的 CDK API 从表中动态添加和删除列。如果添加#table到mat-table元素中，则可以让组件将其用作@ViewChild. 然后您可以使用this.table.addColumnDef并传递您的新列。有关更多详细信息，请参阅https://material.angular.io/cdk/table/api#CdkColumnDef。
回答by Zze
I'm not 100% down with angular-material tables, but this would allow you to create dynamic properties on your Dataobject after a server call.
我不是 100% 使用角度材料表，但这将允许您Data在服务器调用后在您的对象上创建动态属性。
This is a javascript example which will be interchangeable with your typescript implementation where the promise is your http call.
这是一个 javascript 示例，可与您的打字稿实现互换，其中承诺是您的 http 调用。
var obj = { };
var promise = new Promise(resolve => resolve(['one', 'two', 'three']));
promise.then(data => {
for (let column of data){
obj[column] = 'data -> ' + column;
}
console.log(obj);
});