来自 json 的角度 *ngFor

Question

我是 Angular 的新手。首先让我概述一下我想要实现的目标，因为这是一个很长的代码，我正在展示相关部分。

我有一个列表显示组件。

我有（比如说 2 个）组件 animals、zone。

让我们说：

zone有2列zone name和zone code，

动物有3列动物代码、动物名称、动物区

等等（比如说 10 个其他组件）

每个组件都会生成 JSON 并发送给显示列表组件。

显示列表将解析 JSON 并使用 ngFor 显示它

简而言之：

1. 每个组件都会生成 JSON 并发送到具有行为主体的服务中
2. 服务有行为主体，将接收该 JSON
3. 显示组件会从服务的行为主体中获取最新的json
4. 最终显示组件将解析 json 并使用 ngfor 显示它们

我的生成和发送 JSON 到显示列表组件没问题。

例如，我将向您展示发送到显示组件的区域组件的 JSON。

我需要您的帮助来处理 JSON，以便我可以在显示组件 html 上使用 ngFor 显示它。

代码：

data.service.ts：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private messageSource = new BehaviorSubject(null);
  currentMessage = this.messageSource.asObservable();
  constructor() { }
  changeMessage(message: any) {
    console.log('changed');
    console.log(message);


    this.messageSource.next(message);
  }
}

对于区域（zone.component.ts）：[car.component.ts 与 zone.component.ts 相同，不要混淆]

import { Component, OnInit } from '@angular/core';
import { DataService } from "../../services/data.service";
import { Router } from '@angular/router';

@Component({
  selector: 'app-cars',
  templateUrl: './cars.component.html',
  styleUrls: ['./cars.component.css']
})
export class CarsComponent implements OnInit {

  jsonData: any;
  data: any;

  constructor(private router: Router, private dataService: DataService) {
  }

  dd() {
    this.setData(this.jsonData);
  }

  ngOnInit(): void {
    this.setJsonData();
  }

  async getJsonData() {
    const myurl: string = "http://localhost:3000/zone/get/all";
    const response = await fetch(myurl, { headers: { 'Content-Type': 'application/json' } });
    return await response.json();
  }

  async setJsonData() {
    this.jsonData = await this.getJsonData();
  }

  setData(newJsonData: any) {
    this.data = Object.entries(newJsonData);
  }

  navigateToDisplayList(){
    this.router.navigateByUrl('display-list');
  }

  newMessage() {
    this.dataService.changeMessage(this.jsonData);
    // console.log(this.jsonData);
    // console.log(this.data);
    this.navigateToDisplayList();
  }
}

用于显示：display-list.component.ts：

import { Component, OnInit } from '@angular/core';
import { DataService } from "../../services/data.service";

@Component({
  selector: 'app-display-list',
  templateUrl: './display-list.component.html',
  styleUrls: ['./display-list.component.css']
})
export class DisplayListComponent implements OnInit {

  data: any;

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.currentMessage.subscribe(message => this.data = message);
  }

  dd(){
    console.log(this.data);
    document.body.innerText = this.data.toString();
  }
}

特别说明：

请不要因为我没有发布 display-list.html

而认为我还没有研究过

看看我的算法很简单：

1. 每行的外循环
2. 每列的内循环 这就对了。我不需要 HTML 中的任何其他内容

我已经尝试过这种方法：

<tr *ngFor="let x of data">
        <td *ngFor="let y of x">
            {{y}}
        </td>
</tr>    

每次我收到错误：ngFor 不是已知属性

（这很有趣：如果我只是评论 ngfor 错误就消失了

或

如果我只是在像 1,2,3,4,5 这样的静态数组上 ngfor 没有错误）

其他时间：数据无法迭代

（另一个有趣的事情：显然我的 JSON 可以被迭代并且没有引号或括号丢失）

我只是不明白为什么 Angular 不能迭代这个东西

区域列表的 JSON：

[
   {
      "zonecode":3,
      "zonename":"d"
   },
   {
      "zonecode":4,
      "zonename":"d"
   },
   {
      "zonecode":15,
      "zonename":"kk"
   }
]

另一个非常特别的注意事项：

如果您建议在变量中捕获 JSON，则无需发布答案或评论，然后只需在 console.log(object.zonename) 上循环即可。

因为我无法控制 JSON，所以我可以说 30 个其他没有区域名称的组件。我必须直接从 JSON 以 HTML 显示

Answer 1

根据 cmets 更新我的答案....我知道您想访问对象内的键值对，这可以按如下方式完成

<tr *ngFor="let x of data">
        <td *ngFor="let y of x | keyvalue">
            {{y.key}}:{{y.value}}
        </td>
</tr>