NgFor ng-content

Question

我正在尝试使用n-child网格在angular2中构建分层网格。

我的标记看起来应该是这样的

<grid [observable]="users$">
    <column key="Username" caption="Username"></column>
    <column key="Name" caption="Name"></column>

    <grid property="UserGroups">
        <column key="GroupNo" caption="Group-No"></column>        
    </grid>
</grid>

这是我的组件：

@Component({
    selector: 'grid',
    directives: [FORM_DIRECTIVES, Column],
    template: `
        <table class="table table-grid">
            <thead>
                <tr>
                    <th *ngIf="childGrid"></th>
                    <th *ngFor="#col of columns" [attr.key]="col.ColumnKey">
                        {{ col.Caption }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <template ngFor #item [ngForOf]="data">                    
                    <tr>
                        <td *ngIf="childGrid" (click)="setChildData(item)">
                        </td>
                        <td *ngFor="#col of columns" [attr.key]="col.ColumnKey">
                            {{ item[col.ColumnKey] }}
                        </td>
                    </tr>
                    <tr *ngIf="childGrid" class="child-container">
                        <td></td>
                        <td [attr.colspan]="columns.length">
                            <ng-content select="grid"></ng-content>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    `
})
export class Grid {

    private _initialized: boolean = false;

    @Input('observable') obs$: Observable<any[]>;        
    @Input('property') propertyName: string;

    @ContentChildren(Column, false) columns: QueryList<Column>;
    @ContentChildren(Grid, true) childs: QueryList<Grid>;

    data: any[] = [];
    get childGrid(): Grid {
        if (this.childs.length == 0) return null;

        return this.childs.filter(x => x != this)[0];
    }
    htmlNode: HTMLElement;

    constructor(elementRef: ElementRef) {
        this.htmlNode = <HTMLElement>elementRef.nativeElement;
    }

    ngOnInit() {
        if (this.obs$ != null) this.obs$.subscribe(data => this.data = data);
    }

    setChildData(data: any) {
        if (data != null && this.childGrid != null) {
            var prop = this.childGrid.propertyName;

            this.childGrid.data = data[prop]
        }
    }
}

我现在的问题是子网格只渲染一次。 有没有办法为每个循环渲染它？

Answer 1

如果您有多个<ng-content>具有相同的选择器，则内容仅投影到第一个。这是设计的（可能与网络组件<content>标签一致）。即使有几个选择器匹配，内容也只能投射一次。