如何显示外键相关数据

Question

假设应用程序具有这种结构。 如何在界面中显示表“字段”中表“报告”的名称。我试图做这样的事情，但是没有用。

<div *ngFor="let report of reports">
  <div [(ngModel)]='report.platforms_id'>
    <div *ngFor="let paltform  of paltforms">
      <div [(ngModel)]='paltform.fields_id'>
        <div *ngFor="let field  of fields">
          {{field.name}}
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

尝试一下

<div *ngFor="let report of reports">
  <div *ngFor="let platform  of platforms">
    <div *ngIf="report.platform_id==platform.platform_id">
      <div *ngFor="let field  of fields">
        <div *ngIf="field.name==platform.name">
          {{field.name}}
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您已给定对象的ID，该ID可让您从集合中检索它。 因此，除非您完全引用另一个对象，否则您将无法访问其属性。

这里是访问属性和字段属性的一种潜在方法。 为了示例，我将创建字段，平台和报告的集合，其中每个ID将对应于数组中的索引。

reportsArray = [{report_id: 0, platform_id: 1},{report_id: 1, platform_id: 1}];
platformArray = [{platform_id: 0, name: 'A', field_id: 0}];
fieldsArray = [{field_id: 0, name: 'A'}];

因此，要使其在您的示例中起作用，您应该采用以下方式：

 <div *ngFor="let report of reportsArray"> 
   <div>{{platformArray[report.platform_id].name}}</div>
   <div>{{fieldsArray[platformArray[report.platform_id].field_id].name}}</div>
 </div> 

Answer 3

您必须具有json数据，我必须是

[
{report_id:1,platforms_id:2,platforms:[
      platforms_id:2,name="two",fields_id:4,fields:[
           {field_id:4,name="four"},
           {field_id:4,name="four-four"}
          ]
      ],
      platforms_id:2,name="two-two",fields_id:3,fields:[
           {field_id:3,name="three"},
           {field_id:3,name="three-three"}
          ]
      ]
,
...
]

那你就可以做

<div *ngFor="let report of reports">
  <!--see the inner for use report.platforms -->
  <div *ngFor="let platform of report.platforms">
      <!--see the inner for use platform.fields -->
      <div *ngFor="let field of platform.fields">
          {{field.name}}
        </div>
  </div>
</div>