Angular 8个嵌套对象插值

Question

这是我的 Angular CLI 版本：

Angular CLI: 7.3.9
Node: 12.2.0
OS: win32 x64
Angular: 8.0.2

在制作 Angular 8 应用程序时，我尝试使用对应于以下对象的嵌套 FormGroups：

const Boilerplate: any = {
    1: {
        desc: "section1",
        content: {
            1: "question 1.a:",
            2: "question 1.b:",
            3: "question 1.c"
        }
    },
    2: {
        desc: "section2",
        content: {
            4: "question 2.a:",
            5: "question 2.b:",
            6: "question 2.c",
            7: "question 2.d"
        }
    }
}

第 1 部分和第 2 部分有一个由 FormControl 组成的内部 FormGroup，还有一个包含两个内部表单组的外部 FormGroup。这是在 component.ts.

中定义的

在 component.html 中，我尝试遍历外部 FormGroup 的内部 FormGroup，并打印内部 FormControl。这是我目前的代码：

<form [formGroup]="sectionGroup">
   <div *ngIf="boilerplate">
       <div *ngFor="let section of boilerplate | keyvalue">
           {{ boilerplate[section.key].desc }}

           <div formGroupName="{{section.key}}">
               <div *ngFor="let question of boilerplate[{{section.key}}]">
                   <-- things -->
               </div>
           </div>
       </div>
   </div>

行 <div *ngFor="let question of boilerplate[{{section.key}}]"> 失败，错误消息为：

Unexpected token {, expected identifier, keyword, or string

我尝试了以下解决方案，none 对我有用：

<div *ngFor="let question of {{boilerplate}}.{{section.key}}">

<div *ngFor="let question of {{boilerplate[section.key]}}">

<div *ngFor="let question of {{boilerplate[{{section.key}}]}}">

<td *ngFor="let question of Section">{{boilerplate[[section.key]]}}</td>

我尝试了各种其他 {} 和 [] 组合和顺序，现在我意识到嵌套插值是不可解析的。

有没有人对我如何实现这一目标有任何建议？我正在使用嵌套的 FormGroups，因为将来我可能会有额外的部分层。如果样板对象的格式可以解决问题（因为我自己定义了它），则可以更改样板对象的格式。

编辑

以下是解决此问题的方法：

<div *ngFor="let question of boilerplate[section.key].content | keyvalue">
    {{question.value}}
</div>

Answer 1

我尝试如下，

<div [formGroup]="formGroup">
<div *ngIf="boilerplate">
<div *ngFor="let section of boilerplate | keyvalue">
      {{ boilerplate[section.key].desc }}
  <div>
    <div *ngFor="let question of boilerplate[section.key].content | keyvalue">
      {{ question | json }}
    </div>
  </div>
</div>

输出如下，

section1
{ "key": "1", "value": "question 1.a:" }
{ "key": "2", "value": "question 1.b:" }
{ "key": "3", "value": "question 1.c" }
section2
{ "key": "4", "value": "question 2.a:" }
{ "key": "5", "value": "question 2.b:" }
{ "key": "6", "value": "question 2.c" }
{ "key": "7", "value": "question 2.d" }

Answer 2

您需要使用 keyValue 过滤器管道，然后您可以使用以下语法，这将允许您使用 ngFor* 遍历对象而不是数组。

<div *ngFor="let question of boilerplate | keyValue">
    {{ question.key }} - {{ question.value }}
</div>

然后您可以对内部的嵌套对象执行相同的操作，直到显示正确的数据。这在 Angular 的所有版本中都不支持，但在 8.

中绝对没问题

如果您有带有数字键的对象，我希望将其操作成一个数组，这将帮助您保持更简单一点。允许您使用传统的 *ngFor

Answer 3

schoolcoder 的回答很棒，我只是想 post 为以后遇到同样问题的人提供另一个例子。

我有一个包含事务列表的对象块，我想使用两个 *ngFor 在我的页面上显示它

块模型class:

export class Block {
  hash: string;
  previousBlockHash: string;
  transactions: Transaction[];  <<<<<<<<<<<
  merkleRoot: string;
  tries: number;
  timestamp: number;
}

交易模式class

export class Transaction {
  hash: string;
  text: string;
  senderHash: string;
  signature: string;
  timestamp: number;
}

我如何在我的页面上显示它：

Blocks:
<div class="container">
  <ul class="list-group">
    <li class="list-group-item" *ngFor="let block of blocks | keyvalue">
      Hash: {{blocks[block.key].hash}}<br>
      Previous block hash: {{blocks[block.key].previousBlockHash}}<br>
      Merkle root: {{blocks[block.key].merkleRoot}}<br>
      Tries: {{blocks[block.key].tries}}<br>
      Timestamp: {{blocks[block.key].timestamp}}<br>

      Transactions in this block:
      <ul class="list-group">
        <li class="list-group-item" *ngFor="let transaction of blocks[block.key].transactions">
          {{[block.key]}}<br>
          Hash: {{transaction.hash}}<br>
          Text: {{transaction.text}}<br>
          SenderHash: {{transaction.senderHash}}<br>
          Signature: {{transaction.signature}}<br>
          Timestamp: {{transaction.timestamp}}
        </li>
      </ul>
    </li>
  </ul>
</div>

Angular 8个嵌套对象插值

Angular 8 Nested Object Interpolation

html

interpolation

nested-forms

typescript

angular