Question

我在Angular 5中动态绑定表数据的方法。

TS：

    columnList = [{
           name: "info.xyz",
           title: "Xyz"
            }];

HTML：

 <table>
    <thead>
        <tr>
            <th *ngFor="let c of columnsList">
                        {{c.title}}     
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of dataList">
            <td *ngFor="let c of columnsList">
                <div>
                    <div>
                        {{data[c.name]}}
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

dataList变量是我从我的API有效负载中获得的。看起来像 API：

{
info:{
    xyz:4
    }
}

我试图根据列中的标题动态显示行数据。但是，html不会接受{{data [c.name]}}，因为c.name本身就是info.xyz 但是，如果c.name是不带点的单个层次结构，则它将正常工作，因为它将使用data [info]。但是，为此，API数据必须没有有效负载。即 data [info.xyz]无法正常工作（如前所述）

有解决方法吗？

Answer 1

尝试这样

columnsList = [
{
  level1: "test",
  level2: "xyz",
  level3: "pqr",
  title: "Pqr"
},
{
  level1: "info",
  level2: "xyz",
  title: "Xyz"
},
{
  level1: "abc",
  title: "Abc"
}

];

dataList = [{
info: {
  xyz: 4
},
abc : 5,
test: {
  xyz : {
    pqr : 17
  }
}

}];

<table class="kruti">
<thead>
    <tr>
        <th *ngFor="let c of columnsList">
             {{c.title}}     
        </th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let data of dataList">
        <td *ngFor="let c of columnsList">
            <div>
                <div>
                  <span *ngIf="c.level3">{{data[c.level1][c.level2][c.level3]}}</span>
                  <span *ngIf="c.level2 && !c.level3">{{data[c.level1][c.level2]}}</span>
                  <span *ngIf="!c.level2 && !c.level3">{{data[c.level1]}}</span>
                </div>
            </div>
        </td>
    </tr>
</tbody>

行数据与列的动态绑定

1 个答案: