Angular教程开发中无法识别接口成员的问题及解决

在按照Angular官方First App教程开发到第11步时，遇到以下问题：在details.component.ts中使用HousingLocation接口声明变量后，无法访问该接口的photo、name、availableUnits等成员，编译时这些属性下方出现红色波浪线。

相关代码 #

housing-location.component.ts（接口定义所在文件）

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Housinglocation } from '../housinglocation';
import {RouterLink, RouterOutlet} from '@angular/router';

@Component({
  selector: 'app-housing-location',
  standalone: true,
  imports: [
    CommonModule, 
    RouterLink, 
    RouterOutlet],
  template: `
<section class="listing">
    <img class="listing-photo" [src]="HousingLocation.photo" alt="Exterior photo of {{HousingLocation.name}}">
    <h2 class="listing-heading">{{ HousingLocation.name }}</h2>
    <p class="listing-location">{{ HousingLocation.city}}, {{HousingLocation.state }}</p>
    <a [routerLink]="['/details', HousingLocation.id]">Learn More</a>
  </section>
  `,
  styleUrls: ['./housing-location.component.css']
})
export class HousingLocationComponent {
  @Input() HousingLocation!: HousingLocation
}

export interface HousingLocation {
  id: number;
  name: string;
  city: string;
  state: string;
  photo: string;
  availableUnits: number;
  wifi: boolean;
  laundry: boolean;
}

details.component.ts（出现问题的文件）

import { Component,inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { HousingService } from '../housing.service';
import { Housinglocation } from '../housinglocation';
import { HousingLocationComponent } from '../housing-location/housing-location.component';

@Component({
  selector: 'app-details',
  standalone: true,
  imports: [
    CommonModule, 
    HousingLocationComponent
  ],
  template: `
   <article>
    <img class="listing-photo" [src]="Housinglocation?.photo"
      alt="Exterior photo of {{Housinglocation?.name}}"/>
    <section class="listing-description">
      <h2 class="listing-heading">{{Housinglocation?.name}}</h2>
      <p class="listing-location">{{Housinglocation?.city}}, {{Housinglocation?.state}}</p>
    </section>
    <section class="listing-features">
      <h2 class="section-heading">About this housing location</h2>
      <ul>
        <li>Units available: {{Housinglocation?.availableUnits}}</li>
        <li>Does this location have wifi: {{Housinglocation?.wifi}}</li>
        <li>Does this location have laundry: {{Housinglocation?.laundry}}</li>
      </ul>
    </section>
  </article> 
`,
  styleUrls: ['./details.component.css']
})
export class DetailsComponent {
    route: ActivatedRoute = inject(ActivatedRoute);
    housingLocationId = -1;
    housingService = inject(HousingService);
    Housinglocation: Housinglocation | undefined;
    myHousingLocation = "";
  
  
    constructor() {
      this.housingLocationId = Number(this.route.snapshot.params['id']);
      this.Housinglocation = this.housingService.getHousingLocationById(this.housingLocationId);
  }
}

问题原因 #

核心问题是导入路径错误：当前details.component.ts中导入Housinglocation的语句指向了不存在的../housinglocation路径，而实际HousingLocation接口定义在housing-location.component.ts文件中；同时存在接口名称大小写不统一的问题（接口定义为HousingLocation，导入时写成了Housinglocation），加剧了类型识别错误。

解决方法 #

修改details.component.ts中的导入语句，替换为正确的路径，并统一接口名称大小写：

import { HousingLocation } from '../housing-location/housing-location.component';

同时更新组件内的变量声明，保持名称一致：

Housinglocation: HousingLocation | undefined;

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