Angular 5 JSON字符串渲染问题求助（本人为Angular新手）

嘿，作为Angular新手，别慌！渲染这段酒店预订JSON其实很简单，我给你拆解成几个清晰的步骤：

第一步：在组件中定义数据结构并赋值 #

首先，咱得给JSON数据定义对应的TypeScript接口，这样Angular能更好地做类型检查，也方便你写代码时的智能提示。然后把你拿到的JSON字符串解析成对象，赋值给组件的属性。

// 可以单独建一个reservation.interfaces.ts文件，也直接写在组件里
export interface HotelReservation {
  propertyCode: string;
  status: string;
  expectedArrival: string;
  confirmationCode: string;
  expectedDeparture: string;
  adults: string;
  children: string;
  nights: string;
  adaAccessibleReq: string;
  roomTypeCode: string;
  roomTypeName: string;
  wingName?: string; // 有些字段可能不是每个预订都有，加个?标记为可选
}

export interface ReservationData {
  reservations: {
    hotelReservation: HotelReservation[];
  };
}

然后在你的组件类里处理数据：

// reservation.component.ts
import { Component, OnInit } from '@angular/core';
import { ReservationData } from './reservation.interfaces';

@Component({
  selector: 'app-reservation',
  templateUrl: './reservation.component.html',
  styleUrls: ['./reservation.component.css']
})
export class ReservationComponent implements OnInit {
  reservationData: ReservationData;

  ngOnInit() {
    // 假设你从控制台拿到的JSON字符串存在这个变量里
    const jsonString = `{ "reservations":{ "hotelReservation":[ { "propertyCode":"BAC", "status":"Casino 7 Stars", "expectedArrival":"2017-12-15T00:00:00-08:00", "confirmationCode":"IJ87T", "expectedDeparture":"2017-12-16T00:00:00-08:00", "adults":"1", "children":"0", "nights":"1", "adaAccessibleReq":"false", "roomTypeCode":"DD", "roomTypeName":"2 Doubles smoking", "wingName":"BT" }, { "propertyCode":"BAC", "status":"Guaranteed", "expectedArrival":"2017-12-20T00:00:00-08:00", "confirmationCode":"KL98U", "expectedDeparture":"2017-12-22T00:00:00-08:00", "adults":"2", "children":"1", "nights":"2", "adaAccessibleReq":"true", "roomTypeCode":"KK", "roomTypeName":"King non-smoking" } ] } }`;
    
    // 解析JSON字符串为对象
    this.reservationData = JSON.parse(jsonString);
  }
}

第二步：在模板中渲染数据 #

接下来写组件的HTML模板，用*ngFor循环遍历酒店预订数组，用插值表达式{{ }}显示每个字段。另外日期字符串可以用Angular的DatePipe转成更友好的格式：

<!-- reservation.component.html -->
<h2>我的酒店预订</h2>
<div class="reservation-card" *ngFor="let reservation of reservationData.reservations.hotelReservation">
  <div class="reservation-header">
    <span class="property-code">酒店代码: {{ reservation.propertyCode }}</span>
    <span class="status" [class.guaranteed]="reservation.status === 'Guaranteed'">状态: {{ reservation.status }}</span>
  </div>
  <div class="reservation-details">
    <p>确认码: <strong>{{ reservation.confirmationCode }}</strong></p>
    <p>入住日期: {{ reservation.expectedArrival | date:'yyyy-MM-dd HH:mm' }}</p>
    <p>退房日期: {{ reservation.expectedDeparture | date:'yyyy-MM-dd HH:mm' }}</p>
    <p>入住人数: 成人{{ reservation.adults }}位，儿童{{ reservation.children }}位</p>
    <p>入住晚数: {{ reservation.nights }}晚</p>
    <p>无障碍需求: {{ reservation.adaAccessibleReq === 'true' ? '是' : '否' }}</p>
    <p>房型: {{ reservation.roomTypeName }} ({{ reservation.roomTypeCode }})</p>
    <p *ngIf="reservation.wingName">楼翼: {{ reservation.wingName }}</p>
  </div>
</div>

第三步：确保模块引入必要的依赖 #

如果你的组件是在特性模块里，别忘了在模块中引入CommonModule（*ngFor和DatePipe都属于这个模块）：

// reservation.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReservationComponent } from './reservation.component';

@NgModule({
  declarations: [ReservationComponent],
  imports: [CommonModule]
})
export class ReservationModule { }

小提示 #

• 你提供的JSON里第二个预订项的expecte...应该是expectedArrival的笔误，记得修正哦！
• 如果数据是从API获取的，直接把JSON.parse换成HTTP请求的响应处理就行，逻辑是一样的。

内容的提问来源于stack exchange，提问作者Vinay Tawale