angular *ngFor 来自 json

Question

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

我有一个列表显示组件。

我有（比方说 2）个组件 animals、zone.

让我们说：

zone 有 2 列 zone name 和 zone code,

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

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

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

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

显示它

简而言之：

每个组件都会生成JSON并将其发送到具有行为主题
服务有行为主题，将收到JSON
显示组件将从服务的行为主题
最终显示组件将解析 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);
  }
}

for zone (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();
  }
}

特别说明：

请不要因为我没有postdisplay-list.html就认为我还没有研究它

看我的算法很简单：

每行的外循环
每列的内循环这就对了。我不需要 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)，则不需要 post 回答或评论.

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

显示在 HTML

Answer 1

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

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

angular *ngFor 来自 json

angular *ngFor from json

javascript

json

typescript

behaviorsubject

angular