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來轉換結果數據. 訪問值