angular - 为什么当从另一个组件添加到数组时 ngFor 不更新？

Question

我从事此工作已经有一段时间了，许多文章、文档、大量试验和错误，但我觉得我缺少一些核心内容。

本质上，我正在尝试创建一个可扩展的导航组件，其他组件可以在将项目添加到页面时向其添加项目。我已经尝试通过多种方式来完成此操作，包括服务，这个示例我尝试通过将一个组件注入(inject)另一个组件来实现。

我有一个包含项目列表的组件，我有一个循环遍历项目并显示文本的 ngFor。我在页面上有一个按钮，当您单击该按钮时，它会将一个项目添加到数组中。我还将组件注入(inject)到另一个组件中，我在 NgOnInit() 上向数组添加了一个项目(尝试了其他生命周期事件并在构造函数中)。

奇怪的是，当按钮将项目添加到数组时，列表会更新，但是当另一个组件将项目添加到列表时，它不会更新 UI，即使项目的数量增加了，我可以在 UI 中看到该组件已加载并呈现默认项。

import {Component} from 'angular2/core'; 
import {Router, RouteParams} from 'angular2/router'; 
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'; 
import {Injectable} from 'angular2/core';

@Component({
    selector: 'caseBasedSearchSidebar',
    template: `<ul id="sidebar-wrapper" class="clearfix nav navbar-default sidebar-nav">
                  <li *ngFor="#nav of navigationItems">
                    <span>{{nav.name}}</span>
                  </li>
           <ul>  <button (click)=addNavigationItem()>Add</button> `,
directives: [ROUTER_DIRECTIVES] })

@Injectable() export class SidebarComponent {
    public navigationItems: Array<ISideNavigationItem>;

    constructor() {
        this.navigationItems = [{ name: 'test' }];
    }

    public addNavigationItem(item: ISideNavigationItem) {
        this.navigationItems.push({ name: 'test' });
    } 
}

export interface ISideNavigationItem {
name: string; }

import {Component, OnInit} from 'angular2/core'; 
import {SidebarComponent} from '../sideBar.component';

@Component({
    templateUrl: '/CaseBasedSearch/PatientInformation',
    providers: [SidebarComponent] 
})
export class PatientInformationComponent implements OnInit {
    private sideBarComponent: SidebarComponent;

    constructor(sideBarComponent: SidebarComponent) {
        this.sideBarComponent = sideBarComponent;
    }

    ngOnInit() {
        this.sideBarComponent.addNavigationItem({ name: 'testing' });
    } 
}

感谢任何指导。

Answer 1

您正在为 SidebarComponent 分配 navigationItems 模型。对此模型的更改不会传播到其他组件。

考虑将 navigationItems 设置为 @Input 属性:

@Input() public navigationItems: Array<ISideNavigationItem>;

并将您的模型从父组件 (PatientInformationComponent) 传递到您的子组件 (SidebarComponent):

<case-based-search-sidebar [navigationItems]="navigationItems">

另外，按照惯例，SidebarComponent 中的选择器应该是蛇形的:

selector: 'case-based-search-sidebar'

正如其他人提到的:

• SidebarComponent 不是服务。您不需要将它注入(inject)到构造函数中，也不需要将它添加到 providers 属性中。
• 应该删除组件的@Injectable 属性。