在對象中傳遞鍵並在 *ngFor 中使用它

Question

我有一個 api 響應[{"pass":15,"fail":80,"skip":5,"total":100}]並想顯示通過、失敗和跳過值的進度條基礎。 這些應該是3個酒吧。

HTML

<div *ngFor="let summary of summaries" class="result-progress">
    <label for="">{{summary.label}}</label>
    <mat-progress-bar class="" [color]="summary.color"  [value]="summary.value"></mat-progress-bar>
    <span class="bar-tooltip" [ngStyle]="{'color': 'black'}">{{summary.value}}</span>
</div>

組件.ts

   this.httpService.getResultProgress().subscribe((data) => {

      const res = data[0];
      const summaries = [];
      Object.keys(res).forEach((key)=>{
        summaries.push( {
          "label": key,
          "value": res[key],
          "color": "primary"

        })
        return summaries;
      })

      // chart.data = arr;
      console.log(summaries)

    }, (err) => {
      console.log(err);
    });

這是 console.log(summaries) 結果：

[{…}, {…}, {…}, {…}]
0: {label: "pass", value: 15, color: "primary"}
1: {label: "fail", value: 80, color: "primary"}
2: {label: "skip", value: 5, color: "primary"}
3: {label: "total", value: 100, color: "primary"}
length: 4
__proto__: Array(0)

我沒有收到任何錯誤。 html 模板中沒有任何內容。 不知道怎么回事。

預期結果。

Answer 1

這是因為， summaries是在subscribe定義的局部變量。 您需要使其成為班級成員。

export class MyComponent {
   summaries = []; // move it to the top

   ....
   this.httpService.getResultProgress().subscribe((data) => {

      const res = data[0];
      this.summaries = Object.keys(res).map(key=>{
        return {
          "label": key,
          "value": res[key],
          "color": "primary"

        };
      });
}

Answer 2

看起來您沒有將摘要存儲在組件中。 不要將數據修改的結果存儲在訂閱內的const ，而是將其存儲在組件的成員中，如下所示：

//In the class members
summaries = [];

this.httpService.getResultProgress().subscribe((data) => {

  const res = data[0];
  this.summaries = [];
  Object.keys(res).forEach((key) => {
    this.summaries.push( {
      "label": key,
      "value": res[key],
      "color": "primary"
    })
  });

  // chart.data = arr;
  console.log(summaries);

}, (err) => {
  console.log(err);
});

另外，在forEach的回調中返回一些東西是沒有用的，所以我刪除了return summaries;

Answer 3

將頂部（在構造函數中）的summaries定義為

this.summaries = []

並在 http 調用中

this.summaries.push( {
          "label": key,
          "value": res[key],
          "color": "primary"

        }) 

Answer 4

HTML 添加異步管道：

<div *ngFor="let summary of summaries | async" class="result-progress">
  <label for="">{{summary.label}}</label>
  <mat-progress-bar class="" [color]="summary.color"  [value]="summary.value"></mat-progress-bar>
  <span class="bar-tooltip" [ngStyle]="{'color': 'black'}">{{summary.value}}</span>
</div>

.ts 映射與 rxjs 響應

import { Component, OnInit } from '@angular/core';
import { HttpService } from './http.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  summaries: Observable<Array<any>>;
  constructor(
    private httpService: HttpService
  ) { }

  ngOnInit() {
    this.summaries = this.httpService.getResultProgress().pipe(
      map(data => {
        const res = data[0];
        return Object.keys(res).map(key => {
          return {
            "label": key,
            "value": res[key],
            "color": "primary"
          };
        });
      })
    );
  }
}