Javascript 来自json的angular*ngFor

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

我有一个列表显示组件

我有（比如说2个）组件动物，区域

让我们说：

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

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

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

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

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

简而言之：

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

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

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

每个组件将生成JSON并将其发送到具有行为主题的服务

服务具有将接收该JSON的行为主体

显示组件将从服务的行为主题获取最新的json

最后显示组件将解析json并使用ngfor显示它们

生成JSON并将其发送到显示列表组件是正常的

例如，我将向您展示发送到display组件的zone组件的JSON

我需要您的帮助来处理JSON，这样我就可以使用ngFor显示组件html来显示它

代码：

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

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

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

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

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

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

对于区域（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 { 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);
  }
}

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

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

特别提示：

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

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

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

请不要以为我还没有研究它，只是因为我没有发布display list.html

看，我的算法很简单：

每行的外部循环

每个列的内部循环 就是这样。我不需要HTML中的任何其他内容

我尝试过这种方法：

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

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

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

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

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

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

---

因为我无法控制JSON，所以我有30个没有zonename的组件。我必须直接从JSON以HTML显示，根据注释更新我的答案……我知道您想要访问对象内部的键值对，这可以按如下方式完成

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

{{y.key}}:{{y.value}

我在问题中特别提到：如果您建议在变量中捕获JSON，那么只需在console.log（object.zonename）上循环即可，无需发布答案或注释。因为我无法控制JSON，所以我有30个没有zonename的组件。我必须直接从JSONnow以HTML显示，回到为什么我需要2个循环？我有疑问地说：每行的外循环是每列的内循环。我不需要HTML中的任何其他内容。somthing.zonename不起作用，因为我不知道json中会出现什么，我必须为jsonzonename的每一列值编写代码。zonename不起作用，因为显示列表被其他30个可能没有zonename的组件使用，我必须为每一列值编写代码。非常感谢，您是一位非常优秀的程序员。我再次感谢你抽出时间。