Question

我是Angular 2的新手，我的嵌套组件不可见，甚至没有处理过。你能帮忙吗？我想我可能还没有宣布任何指令...... 我的主要内容：

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...

没有显示匹配行，但dom中存在约150个

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 ...

Answer 1

您应该在let中使用#代替*ngFor而我假设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>

嵌套组件不可见

1 个答案: