嵌套组件不可见

我是新来的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' –

你可以发布匹配行的代码吗？ –

已添加匹配行，请参阅上面的 –

嵌套组件不可见

回答

相关问题