Question

有些背景，如果你想跳到真正的问题，请向下滚动： - ）。

我有两个array个object s 一个定义要在表中显示的字段，一个用每个字段定义每一行以及一些元数据，在本例中为inputs

headers = [
    {
        field: 'a'
    },
    {
        field: 'b'
    }
]

rows = [
    {
        a: "foo", 
        b: "bar", 
        inputs: false
    },
    {
        a: "foo",
        b: "bar", 
        inputs: true
    }
]

object中的每个rows以及object

中的每个headers都会被重复

<table>
    <tr *ngFor="let row of rows">
        <td *ngFor="let cell of headers" [innerHtml]="row[cell.field]">
        </td>
    </tr>
</table>

只要一切都很好。但是如果我想要动态输入字段取决于row.inputs值 - 应该如何解决？

使用两组<td>和*ngIf="row.inputs"（反之亦然）给出了这个错误：

一个元素上不能有多个模板绑定。仅使用一个名为“template”的属性或前缀为* ...
的属性

这是一个无赖，但我明白了。

问题

在最好的世界中，我想在innerHtml中使用一个函数，它返回一个输入组件，但是它会是什么样子？

例如：

在我的Component我添加了一个名为getDataOrInput

的函数

  getDataOrInput(row, field): string | HTMLElement {
    if(row.inputs){
        /* 
        * Generate a Component based on field, and return HTML ?  
        */
    } else {
        return row[field]
    }
}

并在HTML中

<table>
    <tr *ngFor="let row of rows">
        <td *ngFor="let cell of headers" 
            [innerHtml]="getDataOrInput(row,cell.field)">
        </td>
    </tr>
</table>

Answer 1

您的错误消息*ngIf and *ngFor on same element causing error

有一个简单的解决方法

Angular 2 dynamic tabs with user-click chosen components

中介绍了动态组件的替代方法

Answer 2

如果要根据字段生成组件，最好的选择可能是创建结构指令。

例如：

const factory = this._resolver.resolveComponentFactory(**SomeComponent**);

// Make the Component with a factory and index (tells angular where to place component)

const componentRef = this._viewContainer.createComponent(factory, i);

// then you can tap into the instance of that component like so:
componentRef.instance.[**SomeInputName**]

如何将动态组件设置为模板？

2 个答案: