Question

假设我的结构如下：

<my-table>
    <my-row>
        <my-col>Value 1</my-col>
        <my-col>Value 2</my-col>
    </my-row>
    <my-row>
        <my-col>Value 3</my-col>
        <my-col>Value 4</my-col>
    </my-row>
</my-table>

现在，在页面渲染之后，我想在my-table组件中有一个变量，结构如下：

[
  ['Value 1', 'Value 2'],
  ['Value 3', 'Value 4']
]

我必须动态渲染我对此变量所做的任何更改（排序，过滤等）。

如何实现这一目标？

//修改 我无法使用嵌套的* ngFor执行此操作，因为我想在my-col中包含其他组件，例如bootstrap进度条等。

此致

Answer 1

简单的解决方案是将__str__的数组传递给每个__repr__，即 cols组件模板将是

row

其中my-table是您的数组数组。 <my-row ng-repeat="row in rows" cols="row" />组件模板可能是

之类的东西

rows

my-row是从<my-col ng-repeat="col in cols" />到cols: '='的双向约束。

Answer 2

您必须使用嵌套的* ngFor，第一个获取每一行，第二个获取每行中的列：

<my-table>
   <my-row *ngFor="let row of arr">
       <my-col *ngFor="let column of row">{{ column }}</my-col>
   </my-row>
</my-table>

从Angular 2中的父组件访问子组件值的简便方法

2 个答案: