在对象中传递键并在 *ngFor 中使用它答案

【问题标题】：Passing keys in an object and using it in *ngFor在对象中传递键并在 *ngFor 中使用它
【发布时间】：2020-04-30 22:16:46
【问题描述】：

我有一个 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模板中没有任何内容。不知道怎么回事。

预期结果。

【问题讨论】：

标签： javascript angular api angular-material

【解决方案1】：

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"
          };
        });
      })
    );
  }
}

【讨论】：

【解决方案2】：

将顶部的summaries（在构造函数中）定义为

this.summaries = []

在http调用中

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

        })

【讨论】：

【解决方案3】：

您似乎没有将摘要存储在组件中。不要将数据修改的结果存储在订阅内的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;

【讨论】：

【解决方案4】：

这是因为，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"

        };
      });
}

【讨论】：