嵌套組件不可見

我是新來的Angular 2，我的嵌套組件不可見或甚至處理。你能幫忙嗎？我想我可能還沒有宣佈任何指令.... 我main.ts：嵌套組件不可見

import {bootstrap} from 'angular2/platform/browser'; 
import {MatchListComponent} from "./match/match.component"; 
import { HTTP_PROVIDERS } from 'angular2/http'; 

bootstrap(
    MatchListComponent, 
    [ HTTP_PROVIDERS ] 
);

我MatchListComponent看起來像這樣：

@Component({ 
     selector: "matches", 
     template: ` 
      <table class="table"> 
      <match-row *ngFor="#list of matches" match="list" > 
      </match-row> 
      </table> 
     `, 
     providers: [MatchService] 
    }) 
    export class MatchListComponent implements OnInit...

不匹配行成爲顯示出來，但約150他們存在於DOM

Edit: match-row 

@Component({ 
    selector: "match-row", 
    template: ` 
     <tr > 
      <td> 
      {{match.matchday.number}} 
      </td> 
      <td> 
       {{match.displayValue}} 
      </td> 
     </tr> 
    `, 
    providers: [TrainerService, MatchdayService] 
}) 
export class MatchRowComponent ...

來源

2017-03-12 Flo rian

你應該在你*ngFor使用let代替#和我假設你match是match-row的輸入。所以，你的

<match-row *ngFor="#list of matches" match="list"</match-row>

應該

<match-row *ngFor="let list of matches" [match]="list" ></match-row>

爲了變量傳遞()Input是你必須在方括號包住名。就像輸出包裝在括號中一樣。傳入字符串時，輸入可以不帶方括號，而不是變量。

希望有所幫助。

編輯：

隨着match-row添加的代碼，還有一個更簡單的做到這一點的方式。沒有真正的理由讓這個單獨的組件。將你的行入主要部件，以這種方式就可以遍歷：

<table class="table"> 
    <tr *ngFor="let match of matches"> 
     <td>{{match.matchday.number}}</td> 
     <td>{{match.displayValue}}</td> 
    </tr> 
</table>

如果你堅持在另一個組件具有顯示數據，嘗試移動<tr>回的主要成分，因爲它是你要分開每個行出。這將是這個樣子：

<table class="table"> 
    <tr *ngFor="let list of matches"> 
    <match-row [match]="list"></match-row> 
    </tr> 
</table>

來源

2017-03-12 19:05:34

感謝泰勒，我已經改變了，但現在香港專業教育學院得到這個^^： '例外：模板解析錯誤：屬性綁定ngFor不是嵌入模板中使用任何指令（「 <！ - 表 - > <表類=」表「> [ERROR - >] <匹配排* ngFor =」讓匹配列表」 [匹配] = 「列表」> 「）：MatchListComponent @ 11：8' –

你可以發佈匹配行的代碼嗎？ –

已添加匹配行，請參閱上面的 –

嵌套組件不可見

回答

相關問題