需要从 [object][object] 获取一个值

Question

我有一个 angular 组件：

import { Component, OnInit } from '@angular/core';
import { Hall } from 'src/app/models/hall.model';
import { HallService } from 'src/app/services/hall.service';
import { ActivatedRoute, Router } from '@angular/router';
import {City} from "../../models/city.model";

@Component({
  selector: 'app-halls-list',
  templateUrl: './halls-list.component.html',
  styleUrls: ['./halls-list.component.css']
})
export class HallsListComponent implements OnInit {
  Halls?: Hall[];
  currentHall: Hall = {};
  currentIndex = -1;
  name = '';
  placeqty='';
  //cityid='';
    cityid:any;

  constructor(private hallService:HallService,private route: ActivatedRoute,private router: Router) { }

  ngOnInit(): void {
    this.retrieveHalls();

  }

  retrieveHalls(): void {
    this.hallService.getAll()
      .subscribe(
        data => {
          this.Halls = data;
          console.log(data);
        },
        error => {
          console.log(error);
        });
  }

  refreshList(): void {
    this.retrieveHalls();
    this.currentHall = {};
    this.currentIndex = -1;
  }
  setActiveHall(hall: Hall, index: number): void {
    this.currentHall = hall;
    this.currentIndex = index;
  }

  deleteHall(): void {
    this.hallService.delete(this.currentHall.id)
      .subscribe(
        response => {
          console.log(response);
          this.router.navigate(['/halls']);
        },
        error => {
          console.log(error);
        });
  }
}

它正在从我之前用 spring 引导写入的 rest api 获取数据。城市 id 是一个相关的列，因此它返回具有城市名称和它的 id 的对象。控制台输出是这样的：

[
    {
        "id": 1,
        "name": "TestHall",
        "placeqty": 100,
        "cityid": {
            "id": 2,
            "name": "Dnepr"
        }
    }
]

一个城市的id和它的名字是一个。所以在这个对象中只能返回一个城市。现在我想要的是显示城市名称但没有 id。这是我目前在模板中的内容：

<div class="col-md-6">
  <h4>Список залов</h4>
  <ul class="list-group">
    <li
      class="list-group-item"
      *ngFor="let hall of Halls; let i = index"
      [class.active]="i == currentIndex"
      (click)="setActiveHall(hall, i)"
    >
      {{ hall.name }}
     <br>
     кол-во мест:  {{ hall.placeqty }}
      <br>
     <p>{{hall.cityid | json}}</p>
      <div *ngFor="let item of hall.cityid | keyvalue;">

        {{ item.key}} - {{ item.value }}

      </div>

    </li>

  </ul>

</div>
<div class="col-md-6">
  <div *ngIf="currentHall.id">
    <h4>Зал</h4>
    <div>
      <label><strong>Название:</strong></label> {{ currentHall.name }}
      <label><strong>Количество мест:</strong></label> {{ currentHall.placeqty }}
      <label><strong>Город:</strong></label> {{ currentHall.cityid }}

    </div>


    <a class="badge badge-warning" routerLink="/cities/{{ currentHall.id }}">
      Изменить
    </a>
    <div *ngIf="!currentHall">
      <br />
      <p>Выберите Зал...</p>
    </div>
  </div>
</div>

如果我会使用 PHP 我会做类似

echo $cityid[0]['name'];

没有任何循环。在 Angular 中是否可行？或者我该如何解决？

我的模型class:

export class Hall {
  id?:any;
  name?:string;
  placeqty?:string;

  cityid?:string;

}

嗯。答案非常正确。此外，我将添加我的城市模型，以防万一有人需要它。它在 Angular 12 的情况下也以这种方式工作，但这是我在 Angular 上的第一个项目，我不知道它在 Angular 11 或更低版本上如何工作。但还是

export class City {
  id?:any;
  name?:string;
}

Answer 1

改为将所有评论收集到一个答案...

因此，如果您收到如下数据：

{
    "id": 1,
    "name": "TestHall",
    "placeqty": 100,
    "cityid": {
        "id": 2,
        "name": "Dnepr"
    }
}

你的模型首先需要匹配，所以它们应该是这样的：

interface Hall {
  id: number;
  name: string;
  placeqty: number;
  cityid: City;
}

interface City {
  id: number;
  name: string;
}

现在，对于嵌套对象，您可以使用安全导航运算符来保护 null 或 undefined 值。要获取城市名称，您只需访问嵌套的属性即可：

<p>{{ hall.cityid?.name }}</p>

需要从 [object][object] 获取一个值

Need to get one value from [object][object]

angular

typescript

angular12