英文:
Angular's property binding is driving me crazy
问题
以下是您提供的内容的中文翻译部分：
我对Angular还很陌生，我正在尝试将list-articles中的数据绑定到另一个名为Article的组件中。我尝试了几个小时，但没有成功。
<!-- list-articles.component.html -->
<ul>
<li *ngFor="let a of Articles"><article [Titre]="a.Titre" [Description]="a.Description" [Banniere]="a.Banniere"></article></li>
</ul>
// list-articles.component.ts
export class ListArticlesComponent {
Articles: ArticleComponent[] = [
{ Titre: "article1", Banniere: ".../imgs/images.png", Description: "Voici l'article1" },
{ Titre: "article1", Banniere: ".../imgs/images.png", Description: "Voici l'article1" },
{ Titre: "article1", Banniere: ".../imgs/images.png", Description: "Voici l'article1" }
];
}
// ArticleComponent.ts
export class ArticleComponent {
@Input()
Titre: string = "";
Banniere: string = "";
Description: string = "";
}
<!-- article.component.html -->
<div>
<img />
<h4>{{Titre}}</h4>
<p>{{Description}}</p>
</div>
我已经更改了list-articles.component.ts中属性的语法多次，但没有显示任何内容（请参见下面的图片）。预期结果应该是在ul中显示list-articles.component.ts中的数据。如果有人能解释我做错了什么，我将不胜感激。
感谢您，祝您有美好的一天！
英文:
I'm new to Angular and I am struggling to bind data from list-articles to another component called Article. I tried for several hours and it does not work.
<!--list-articles.component.html-->
<ul>
<li *ngFor="let a of Articles;"><article [Titre]="a.Titre" [Description]="a.Description" [Banniere]="a.Banniere"></article></li>
</ul>
//list-articles.component.ts
export class ListArticlesComponent {
Articles:ArticleComponent[] = [{Titre:"article1",Banniere: ".../imgs/images.png", Description:"Voici l'article1"},
{Titre:"article1",Banniere:".../imgs/images.png", Description:"Voici l'article1"},
{Titre:"article1",Banniere:".../imgs/images.png", Description:"Voici l'article1"}];
}
//ArticleComponent.ts
export class ArticleComponent {
@Input()
Titre:string ="";
Banniere:string="";
Description:string="";
}
<!--article.component.html-->
<div>
<img />
<h4>{{Titre}}</h4>
<p>{{Description}}</p>
</div>
I changed the syntax of the properties in list-articles.component.ts a dozen times and it does not display anything (see image below). The expected result should be the data in list-articles.component.ts displayed in the ul. I would really appreciate if someone could explain to me what I'm doing wrong.
edit: this should be the result
Thank you and have a nice day 
答案1
得分: 2
The problem is at the ArticleComponent.
// ArticleComponent.ts
export class ArticleComponent {
@Input()
Titre: string = "";
Banniere: string = "";
Description: string = "";
}
The @Input decorator must be in the same line as the property and must be present on every property:
// ArticleComponent.ts
export class ArticleComponent {
@Input() Titre: string = "";
@Input() Banniere: string = "";
@Input() Description: string = "";
}
I really suggest you read the Angular docs starting from the Getting Started:
https://angular.io/guide/what-is-angular
Also, as suggested by @joka00, you should not use existing HTML tag names for components. Angular suggests adding an app- prefix to your components to avoid name collisions. That's the default behavior of ng g component.
英文:
The problem is at the ArticleComponent.
// ArticleComponent.ts
export class ArticleComponent {
@Input()
Titre:string ="";
Banniere:string="";
Description:string="";
}
The @Input decorator must be in the same line as the property, and must pre present at every property:
// ArticleComponent.ts
export class ArticleComponent {
@Input() Titre:string ="";
@Input() Banniere:string="";
@Input() Description:string="";
}
I really suggest you reading the Angular docs starting from the Getting Started:
https://angular.io/guide/what-is-angular
Also as suggested by @joka00 you should not use existing html tags names for components.
Angular suggestions you adding an app- prefix to your components to avoid names colisions. That's the default behavior of ng g component.
答案2
得分: -1
你使用的是 let asdf of Articles，这意味着应该使用 asdf 对象来访问文章的属性，但你却试图使用 a 对象来访问，这是错误的。
正确的模板应该是：
<ul>
<li *ngFor="let asdf of Articles;"><article [Titre]="asdf.Titre" [Description]="asdf.Description" [Banniere]="asdf.Banniere"></article></li>
</ul>
英文:
You are using let asdf of Articles which means, Article's properties should be accessed by asdf object but you are trying to access it using a object which is wrong.
Correct template would be:
<ul>
<li *ngFor="let asdf of Articles;"><article [Titre]="asdf.Titre" [Description]="asdf.Description" [Banniere]="asdf.Banniere"></article></li>
</ul>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论