Динамическое связывание данных строки со столбцом

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 представляет собой одну иерархию без точки, она отлично работает, так как будет принимать данные [Информация].Но данные API должны быть без полезных данных для этого.т.е. данные [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>