Angular属性绑定问题求助：列表组件向Article组件传值失败

数据老陈

2026-7-22

问题分析与修复方案

核心问题1：数据类型定义错误

ListArticlesComponent 中 Articles 的类型被错误定义为 ArticleComponent[]——ArticleComponent 是组件类，并非数据模型类型，应该定义为普通对象数组（或创建独立的Article接口来规范数据结构）。

核心问题2：输入属性缺失`@Input()`装饰器

ArticleComponent 里的 Banniere 和 Description 未添加 @Input() 装饰器，导致无法接收父组件传递的参数，只有Titre配置了输入绑定，另外两个属性的绑定完全无效。

核心问题3：图片未绑定数据源

article.component.html 中的 <img> 标签没有绑定 src 属性到 Banniere，所以图片不会加载显示。

修复后的代码：

1. 修改 list-articles.component.ts

// 可选但更规范：定义Article接口统一数据结构
interface Article {
  Titre: string;
  Banniere: string;
  Description: string;
}

export class ListArticlesComponent {
  // 修正数据类型为Article接口数组
  Articles: Article[] = [
    {Titre:"article1", Banniere: ".../imgs/images.png", Description:"Voici l'article1"},
    {Titre:"article2", Banniere:".../imgs/images.png", Description:"Voici l'article2"},
    {Titre:"article3", Banniere:".../imgs/images.png", Description:"Voici l'article3"}
  ];
}

2. 修改 ArticleComponent.ts

import { Component, Input } from '@angular/core';

export class ArticleComponent {
  @Input() Titre:string ="";
  // 给Banniere和Description添加@Input()，开启父组件输入绑定
  @Input() Banniere:string="";
  @Input() Description:string="";
}

3. 修改 article.component.html

<div>
    <!-- 绑定img的src属性到Banniere，同时添加alt文本提升可访问性 -->
    <img [src]="Banniere" alt="{{Titre}}" />
    <h4>{{Titre}}</h4>
    <p>{{Description}}</p>
</div>