Angular 2嵌套组件重复

时间:2017-02-09 03:36:48

标签: angular angular2-components

我正在使用带有嵌套组件的Angular 2构建计划。

似乎Angular 2在显示单个子组件之外的数据时出现问题。

例如,我有以下组件层次结构。

  • ScheduleComponent
  • MonthComponent
  • DayComponent

在嵌套的第二级,视图停止以完整的方式反映视图。这是一个月组件html中的一个示例,当一个组件嵌套在它中时,它是一个结果的图片。

<div id="list-container">
    <intra-day [day]="days[day]" *ngFor='let day of days'></intra-day>
</div>

导致此 Error image

请注意,在9月份,没有重复的日子,但在10月份之后,本月的第9天总是重复。

数据并未反映出这一点。我通过删除嵌套组件并直接在MonthComponent html中确认了这一点来确认这一点。

<div id="list-container">
    <!--<intra-day class="list-container well games" [day]="days[day]" [dayName]="day" *ngFor='let day of dayKeys'></intra-day>-->
    <div *ngFor='let day of dayKeys'>
        <md-list>
            <div class="list-name-container well games" (click)="toGames(game)">
                <h3 md-subheader class="display-inline list-name games date-header">{{day}}</h3>
            </div>
            <intra-game *ngFor="let game of gameKeys" [game]="day.games[game]" [gameKey]="game"></intra-game>
            <button md-button class="add-button" md-button color="primary" (click)="openGameModal(game)">ADD GAME</button>
        </md-list>
    </div>
</div>

结果 enter image description here 请注意,没有重复的日子。相同的数据,但视图结果不同。

是否可以嵌套组件数量有限制?这有解决方法吗?我不希望将所有代码都放在一个组件中,因为这是使用Angular 2的一个巨大好处。

0 个答案:

没有答案