个人中心
gpt4 book ai didi

angularjs - NgFor ng-内容

转载 作者：太空狗 更新时间：2023-10-29 18:34:59 25 4
gpt4 key购买 nike

<分区>

我正在尝试使用 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]
        }
    }
}

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

25 4 0
文章推荐： javascript - 访问引导服务的变量
文章推荐： angular - 如何用管道保存 *ngFor 的模型操作？ - "#item of (result = (items | orderAsc))"在 A2 中不起作用
文章推荐： c# - 该应用程序需要程序集...安装在全局程序集缓存中
文章推荐： typescript - 从 TypeScript 中的类读取属性名称？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com