Angular - 在json中的对象内显示对象

Question

我正在尝试使用 angular ngFor 来解析这些数据：

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

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

我目前是如何尝试的

<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>

组件.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'] 是否给了我一个 undefined

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

<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

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

使用 angularjs json 过滤器 -

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

Answer 2

因为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 3

用 console.log 做一个简单的测试，看看 this.transactions['inputs'] 是否给了我一个 undefined

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

解决方案

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

Answer 4

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>