使用* 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在構造函數中沒有這兩個參數。