Angular-在JSON对象中显示对象

Question

我正在尝试使用angular ngFor解析此数据：

链接： https ： //blockchain.info/rawaddr/3MvuMn4CESuvA89bfA1cT8mgC4JtKaReku

我可以通过订阅来很好地检索数据，但是当我尝试显示其中包含对象的属性时。 我收到了[对象，对象]。

我目前如何尝试

<div *ngFor="let t of transactions" >
  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title></mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <table class="table">
        <thead>
          <tr>
            <th scope="col">From</th>
            <th scope="col">To</th>
            <th scope="col">Receiver</th>
            <th scope="col">Hash</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{t.inputs}}</td>
            <td>-></td>
            <td>{{t.out}}</td>
            <td></td>
          </tr>
        </tbody>
      </table>

component.ts

export class InputComponent implements OnInit {

  address = "3MvuMn4CESuvA89bfA1cT8mgC4JtKaReku";
  transactions: any ;
  inputs: any;
  public arrayOfKeys
  constructor(private blockchain: BlockchainService) { }

  ngOnInit() {
  }

  submit(){
    console.log(this.address)
  }

  getTransactions(){
    this.blockchain.getTransactions().subscribe((data) => {
      this.transactions = data["txs"]
      console.log(this.transactions)
      console.log(this.transactions['inputs'])

    });
  }
}

使用console.log进行的简单测试，看this.transactions ['inputs']是否给我未定义的信息

下面的新尝试。 距离工作更近了，但还没有完全完成。

<div *ngFor="let t of transactions">
    <div *ngFor="let field of t.inputs ; let i = index">
        <p>{{ field.sequence }}</p>
        <p>{{ field.witness}}</p>
        {{i}}
        {{field.prev_out[i].addr}}
        <hr>
        <div *ngFor="let out of field.prev_out">
          {{out.addr}}
          </div> 
    </div>
</div>

错误给我

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

因为inputs和out都是对象。 您将必须执行{{ t.inputs.fieldYouWant }}以获取input对象的特定字段。

如果您需要整个input必须将其存储在组件中，然后对其执行ngFor 。

我不确定您是否可以执行以下操作，但是可以尝试一下：

<div *ngFor="let t of transactions">
     <div *ngFor="let field of t.inputs">
         {{ field }}
     </div>
</div>

Answer 2

好吧，因为t.inputs和t.out是对象而不是字符串。 如果您只想显示纯文本数据，则可以使用anuglarjs的“ json”过滤器，或使用“ JSON.stringify”将这些值转换为字符串

使用angularjs json过滤器-

<pre>{{ {'name':'value'} | json }}</pre>

Answer 3

t.inputs不是对象，它是对象的数组。 所以我认为这应该可行。

<div *ngFor="let t of transactions">
<div *ngFor="let field of t.inputs ; let i = index">
    <p>{{ field.sequence }}</p>
    <p>{{ field.witness}}</p>
    {{i}}
    <hr>
    {{field.prev_outt.addr}}
</div>
</div>

Answer 4

使用console.log进行的简单测试，看this.transactions ['inputs']是否给我未定义的信息

快速解决方案，如果您要在控制台中获取日期而不是未定义日期，则获取数据的方法可能是错误的。 getTransactions()的数据对象是未定义的类型。 通过写t['out']而不是t.out ，将值赋值给变量resp ，在组件中给出完整的名称，例如['inputs']['0']['sequence'] 。 比在component.html中使用resp

解

通过为json定义interface ，然后使用use来转换结果数据. 访问值