来自json的angular * ngFor

问题描述

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

我有一个列表显示组件。

我有（让我们说2个）成分动物，区域。

让我们说：

区域具有两列区域名称和区域代码，

动物具有3栏动物代码，动物名称，动物区

依此类推（假设其他10个组件）

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

显示列表将解析JSON并将其显示为ngFor

简而言之：

1. 每个组件将制作JSON并将其发送到具有行为主题的service
2. 服务具有行为主题，它将收到该JSON
3. 显示组件将从服务的行为主题获取最新的json
4. 最终显示组件将解析json并将使用ngfor显示它们

我生成并发送JSON以显示列表组件是可以的。

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

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

代码：

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,{
      "zonecode":15,"zonename":"kk"
   }
]

另一个非常特别的说明：

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

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

解决方法

根据评论更新我的答案。...我了解您要访问对象内部的键值对，可以按照以下步骤进行操作

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