Angular的属性绑定让我疯狂。

huangapple
go评论97阅读模式
英文:

Angular's property binding is driving me crazy

问题

以下是您提供的内容的中文翻译部分：

我对Angular还很陌生，我正在尝试将list-articles中的数据绑定到另一个名为Article的组件中。我尝试了几个小时，但没有成功。

  1. <!-- list-articles.component.html -->
  2. <ul>
  3.     <li *ngFor="let a of Articles"><article [Titre]="a.Titre" [Description]="a.Description" [Banniere]="a.Banniere"></article></li>
  4. </ul>
  1. // list-articles.component.ts
  2. export class ListArticlesComponent {
  3.   Articles: ArticleComponent[] = [
  4.     { Titre: "article1", Banniere: ".../imgs/images.png", Description: "Voici l'article1" },
  5.     { Titre: "article1", Banniere: ".../imgs/images.png", Description: "Voici l'article1" },
  6.     { Titre: "article1", Banniere: ".../imgs/images.png", Description: "Voici l'article1" }
  7.   ];
  8. }
  1. // ArticleComponent.ts
  2. export class ArticleComponent {
  3.   @Input()
  4.   Titre: string = "";
  5.   Banniere: string = "";
  6.   Description: string = "";
  7. }
  1. <!-- article.component.html -->
  2. <div>
  3.     <img />
  4.     <h4>{{Titre}}</h4>
  5.     <p>{{Description}}</p>
  6. </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.

  1. &lt;!--list-articles.component.html--&gt;
  3. &lt;ul&gt;
  4.     &lt;li *ngFor=&quot;let a of Articles;&quot;&gt;&lt;article [Titre]=&quot;a.Titre&quot; [Description]=&quot;a.Description&quot; [Banniere]=&quot;a.Banniere&quot;&gt;&lt;/article&gt;&lt;/li&gt;
  5. &lt;/ul&gt;
  1. //list-articles.component.ts
  2. export class ListArticlesComponent {
  3.   Articles:ArticleComponent[] = [{Titre:&quot;article1&quot;,Banniere: &quot;.../imgs/images.png&quot;, Description:&quot;Voici l&#39;article1&quot;},
  4.   {Titre:&quot;article1&quot;,Banniere:&quot;.../imgs/images.png&quot;, Description:&quot;Voici l&#39;article1&quot;},
  5.   {Titre:&quot;article1&quot;,Banniere:&quot;.../imgs/images.png&quot;, Description:&quot;Voici l&#39;article1&quot;}];
  6. }
  1. //ArticleComponent.ts
  2. export class ArticleComponent {
  3.   @Input()
  4.   Titre:string =&quot;&quot;;
  5.   Banniere:string=&quot;&quot;;
  6.   Description:string=&quot;&quot;;
  7.   
  8. }
  1. &lt;!--article.component.html--&gt;
  2. &lt;div&gt;
  3.     &lt;img /&gt;
  4.     &lt;h4&gt;{{Titre}}&lt;/h4&gt;
  5.     &lt;p&gt;{{Description}}&lt;/p&gt;
  6. &lt;/div&gt;

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.

Angular的属性绑定让我疯狂。

edit: this should be the result

Angular的属性绑定让我疯狂。

Thank you and have a nice day Angular的属性绑定让我疯狂。

答案1

得分: 2

The problem is at the ArticleComponent.

  1. // ArticleComponent.ts
  2. export class ArticleComponent {
  3.   @Input()
  4.   Titre: string = "";
  5.   Banniere: string = "";
  6.   Description: string = "";
  7. }

The @Input decorator must be in the same line as the property and must be present on every property:

  1. // ArticleComponent.ts
  2. export class ArticleComponent {
  3.   @Input() Titre: string = "";
  4.   @Input() Banniere: string = "";
  5.   @Input() Description: string = "";
  6. }

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.

  1. // ArticleComponent.ts
  2. export class ArticleComponent {
  3.   @Input()
  4.   Titre:string =&quot;&quot;;
  5.   Banniere:string=&quot;&quot;;
  6.   Description:string=&quot;&quot;;
  7.   
  8. }

The @Input decorator must be in the same line as the property, and must pre present at every property:

  1. // ArticleComponent.ts
  2. export class ArticleComponent {
  3.   @Input() Titre:string =&quot;&quot;;
  4.   @Input() Banniere:string=&quot;&quot;;
  5.   @Input() Description:string=&quot;&quot;;
  6. }

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 对象来访问，这是错误的。

正确的模板应该是：

  1. <ul>
  2.     <li *ngFor="let asdf of Articles;"><article [Titre]="asdf.Titre" [Description]="asdf.Description" [Banniere]="asdf.Banniere"></article></li>
  3. </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:

  1. &lt;ul&gt;
  2.     &lt;li *ngFor=&quot;let asdf of Articles;&quot;&gt;&lt;article [Titre]=&quot;asdf.Titre&quot; [Description]=&quot;asdf.Description&quot; [Banniere]=&quot;asdf.Banniere&quot;&gt;&lt;/article&gt;&lt;/li&gt;
  3. &lt;/ul&gt;

huangapple
  • 本文由 发表于 2023年5月8日 00:24:37
  • 转载请务必保留本文链接：https://go.coder-hub.com/76195046.html
  • angular
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定