Angular 17执行ng serve报NG9错：RoomsCatalogComponent无roomsCatalog属性

问题描述 #

• 基于Angular 17开发练习UI，执行ng serve时触发报错：NG9: Property 'roomsCatalog' does not exist on type 'RoomsCatalogComponent'
• 已在RoomsCatalogComponent类中定义@Input() roomsCatalog: RoomDetails[]=[]属性，但错误仍未消除
• 涉及核心文件路径：my-workspace\projects\new-hotel-inventory\src\app\rooms\rooms-catalog\rooms-catalog.component.ts

排查与解决步骤 #

• 检查@Input()装饰器导入：确保组件文件顶部已从@angular/core正确导入Input，代码应为import { Input } from '@angular/core';
• 验证模板拼写：确认组件html模板中引用的属性名是roomsCatalog，无大小写错误或拼写偏差
• 清除Angular缓存：执行ng clean清除编译缓存后，重新运行ng serve
• 确认接口导入：检查RoomDetails接口是否已正确导入到组件类中，路径需与实际文件位置匹配
• 检查组件模块声明：确保RoomsCatalogComponent已添加到对应NgModule的declarations数组内，未遗漏声明
• 确认属性作用域：保证roomsCatalog属性直接定义在RoomsCatalogComponent类的顶层作用域，而非嵌套在内部函数或其他代码块中

正确代码示例参考 #

组件TS文件 #

import { Component, Input } from '@angular/core';
import { RoomDetails } from '../room-details'; // 替换为你的接口实际路径

@Component({
  selector: 'app-rooms-catalog',
  templateUrl: './rooms-catalog.component.html',
  styleUrls: ['./rooms-catalog.component.css']
})
export class RoomsCatalogComponent {
  @Input() roomsCatalog: RoomDetails[] = [];
}

组件HTML模板 #

<!-- 示例：遍历roomsCatalog展示数据 -->
<div *ngFor="let room of roomsCatalog" class="room-item">
  <h3>{{ room.roomNumber }}</h3>
  <p>{{ room.roomType }}</p>
</div>

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