使用* ngFor迭代组件

Question

我在angular2中使用ngFor指令生成组件时遇到问题。

我期望的组件模型树是：RootComponent ArticlesComponent Article_1 Article_2 Article_N

**RootComponent.html**
<section>Html for root component goes here</section>
<articles>This contains the articles html and will act as container for enumerated article tags</articles>

**Articles.component.ts**


 import {Component} from "@angular/core";
 import {ArticleComponent} from "./article.component";


 @Component({
             moduleId : module.id,
             selector : 'articles-list',
             template : `<div class="row">
                           <ul>
                             <li *ngFor="let article of articles" >
                                       <article [title]="article.title"
                                       [link]="article.link"></article>
                             </li>
                           </ul>
                        </div>`
           })


 export class ArticleListComponent{

     public articles :ArticleComponent[];

     constructor(){
        this.articles = [];
        let articleObj1 = new ArticleComponent("title1","link1");
        let articleObj2 = new ArticleComponent("title2","link2");
        this.articles.push(articleObj1);
        this.articles.push(articleObj2);
     }

  }

  **Article.component.ts**

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

   @Component({
               moduleId: module.id,
               selector: 'article',
               templateUrl: `<div class ="row">
                               <h3>{{title}}</h3>
                               <h5><a href="#" >{{link}}</a></h5> 
                             </div>`
             })


   export class ArticleComponent {

         @Input() title : string;
         @Input() link : string;

         public count:number;

         constructor(title,link){
                this.title = title;
                this.link = link;
         }

         incrementCount(){
            this.count++;
         }


     }

System.js引发错误：

(SystemJS) Can't resolve all parameters for ArticleComponent: (?, ?).↵  Error: Can't resolve all parameters for ArticleComponent: (?, ?).↵

该错误实际上是什么意思，以及如何纠正该错误？

Answer 1

ArticleComponent由Angulars DI实例化。 如果具有参数，则它们必须由DI解析。 title和link无法解析，因为没有提供者。 没有类型注释的参数也将需要@Injectable()装饰器。

我认为正确的方法是从构造函数中删除参数，而仅使用输入。

 export class ArticleComponent {

     @Input() title : string;
     @Input() link : string;

     public count:number;

     /*constructor(title,link){
            this.title = title;
            this.link = link;
     }*/

     incrementCount(){
        this.count++;
     }
 }

同样， ArticleListComponent的构造ArticleListComponent也可以缩短，因为如上所述，DI创建了组件实例。

 export class ArticleListComponent{

     public articles :ArticleComponent[];

     /*
     constructor(){
        this.articles = [];
        let articleObj1 = new ArticleComponent("title1","link1");
        let articleObj2 = new ArticleComponent("title2","link2");
        this.articles.push(articleObj1);
        this.articles.push(articleObj2);
     }*/
  }

您需要的只是*ngFor的数据，其余的由<article>

 export class ArticleListComponent{

     public articles :ArticleComponent[];

     constructor(){
        this.articles = [{title: "title1",link: "link1"}, {title: "title2",link: "link2"}];
     }
  }

Answer 2

根据您的代码，只需更改

let articleObj1 = {"title":"title1","link" : "link1"};
let articleObj2 = {"title":"title2","link" : "link2"};

然后您将获得所需的输出。

无需这样做：

let articleObj1 = new ArticleComponent("title1","link1");
let articleObj2 = new ArticleComponent("title2","link2");

错误与ArticleComponent("title1","link1") ，您的ArticleComponent在构造函数中没有这两个参数。