需要從[object][object]獲取一個值

我有一個角度組件：

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 boot 撰寫的 rest api 獲取資料。City 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 中可行嗎？或者我該如何解決？

我的模型類：

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

  cityid?:string;

}

好。答案是非常正確的。此外，我將添加我的城市模型，以防萬一有人需要它。它在 Angular 12 的情況下也是這樣作業的，但是這是我在 Angular 上的第一個專案，我不知道它在 Angular 11 或更低版本上如何作業。但還是

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

uj5u.com熱心網友回復：

改為收集所有評論到答案...

因此，如果您正在接收如下資料：

{
    "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>

標籤：有角的 打字稿 角12

上一篇：根據另一個mat-select的值顯示不同的mat-options

下一篇：在一個Observable中設定邏輯？角