Angularjs 天然气含量

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

我的标记应该是这样的

<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]
        }
    }
}

@组件({
选择器：“网格”，
指令：[表格_指令，列]，
模板：`
{{col.Caption}}
{{item[col.ColumnKey]}
`
})
导出类网格{
private _initialized:boolean=false；
@输入（‘可观察’）obs$：可观察；
@输入（'property'）属性名称：字符串；
@ContentChildren（Column，false）列：QueryList；
@ContentChildren（Grid，true）childs:QueryList；
数据：任意[]=[]；
获取childGrid（）：Grid{
if（this.childs.length==0）返回null；
返回this.childs.filter（x=>x！=this）[0]；
}
htmlNode:HTMLElement；
构造函数（elementRef:elementRef）{
this.htmlNode=elementRef.nativeElement；
}
恩戈尼尼特（）{
如果（this.obs$！=null）this.obs$.subscribe（data=>this.data=data）；
}
setChildData（数据：任意）{
if（data！=null&&this.childGrid！=null）{
var prop=this.childGrid.propertyName；
this.childGrid.data=data[prop]
}
}
}

我现在的问题是子网格只渲染一次。

---

是否有一种方法可以为每个循环渲染它？

如果有多个

使用相同的选择器，则内容仅投影到第一个。这是经过设计的（可能是为了与web组件

标记对齐）。即使多个选择器匹配，内容也只能投影一次

有没有办法解决这个问题？我现在有点迷路了。hwo解决了这个问题。那么您想重复组件用户作为子组件提供的内容吗？我刚开始调查类似的事情。我认为构建类似于

NgFor

的东西应该是可能的，其中一个指令获取一个模板并将其渲染x次，但我自己还没有让它工作起来。来源看起来不太复杂。组件的用户可能需要提供包装在

usercontent

中的内容。我的目标是创建一个可以有多个子网格的网格组件。数据可以是动态的，我需要定义列，所以我可以添加一些选项，比如sortable和draggable。我想我会尝试创建类似ngFor的东西，我可以使用。