Presented here is an angular component:
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);
});
}
}
The component fetches data from a RESTful API implemented with Spring Boot. The "cityid" field in the returned object contains both the city's name and its ID like so:
[
{
"id": 1,
"name": "TestHall",
"placeqty": 100,
"cityid": {
"id": 2,
"name": "Dnepr"
}
}
]
In this scenario, only one city is associated with each entry. The objective now is to display just the city's name without its ID. Below is the code snippet from the template:
<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>
If I were using PHP, I would simply do something like:
echo $cityid[0]['name'];
without any need for a loop. Is there a similar approach in Angular? Alternatively, how can this be achieved?
Here is my model class for Hall:
export class Hall {
id?:any;
name?:string;
placeqty?:string;
cityid?:string;
}
As a reference, below is also my City model which follows the same structure in Angular 12:
export class City {
id?:any;
name?:string;
}