Html 查看isn'；t使用角度2更新

这是我的导航html

    <nav class="menu">
    <a href="/logout">Logout</a>
</nav>
<input  placeholder="SEARCH FOR SOLUTION..." type="text" class="search-input" [(ngModel)]="searchInput"
       (ngModelChange)="filter()"/>

这是我的导航组件

import {Component, OnInit} from "angular2/core";
import {Output} from "angular2/core";
import {Input} from "angular2/core";
import {EventEmitter} from "angular2/core";
import {NgZone} from "angular2/core";

@Component({
    selector: "navigation",
    templateUrl: 'app/components/navigation/navigation.html'
})

export class NavigationComponent implements OnInit {
    @Output() onFilterSolutions = new EventEmitter<string>();

    public searchInput:string;

    constructor(private _ngZone:NgZone) {
        console.log("Great!");
    }

    ngOnInit() {
        console.log(222);
    }

    filter() {
        this.onFilterSolutions.emit(this.searchInput);

    }
}

从“angular2/core”导入{Component，OnInit}；
从“angular2/core”导入{Output}；
从“angular2/core”导入{Input}；
从“angular2/core”导入{EventEmitter}；
从“angular2/core”导入{NgZone}；
@组成部分({
选择器：“导航”，
templateUrl:'app/components/navigation/navigation.html'
})
导出类NavigationComponent实现OnInit{
@Output（）onFilterSolutions=新的EventEmitter（）；
公共搜索输入：字符串；
建造商（专用区：专用区）{
console.log（“太棒了！”）；
}
恩戈尼尼特（）{
控制台日志（222）；
}
过滤器（）{
this.onFilterSolutions.emit（this.searchInput）；
}
}

此组件捕获事件（方法：onFilterSolutions）

从“angular2/core”导入{Component，OnInit}；
从“angular2/Http”导入{Http，Headers}；
从“../../shared/models/SolutionComponent”导入{SolutionComponent}；
从“../../shared/models/SolutionComponentType”导入{SolutionComponentType}”；
从“../../shared/services/SolutionsService”导入{SolutionsService}”；
从“../../shared/services/MetaComponentsService”导入{MetaComponentsService}”；
从“../../shared/models/Solution”导入{Solution}；
从“../../shared/interfaces/ISolution”导入{ISolution}”；
从“angular2/core”导入{Input}；
从“./navigation/NavigationComponent”导入{NavigationComponent}；
从“angular2/core”导入{Output}；
从“angular2/core”导入{NgZone}；
@组成部分({
选择器：“主页”，
templateUrl:“app/components/home/home.html”，
指令：[导航组件]
})
导出类HomeComponent实现OnInit{
缓存解决方案：解决方案[]=[]；
解决方案：解决方案[]=[]；
元成分：任何；
构造函数（公共_解决方案服务：解决方案服务，公共_元组件服务：元组件服务，私有_ngZone:ngZone）{
这是._solutionsService.getAll（）。然后（（解决方案）=>{
这是._metaComponentsService.getAll（）。然后（（metaComponents）=>{
this.metaComponents=元组件；
这就是解决方案=解决方案；
this.cachedSolutions=解决方案；
}，（错误）=>{
控制台错误（err）；
});
}，（错误）=>{
控制台错误（err）；
});
}
公共getMetaComponent（解决方案）{
var metaComponent=this.metaComponents.find（（metaComponentItem）=>{
返回metacomponentiem.\u id==solution.metaComponentId；
});
返回元成分；
}
公共更新解决方案（解决方案）{
这个._solutionsService.update（solution.toJSON（））。然后（（响应）=>{
console.log（“更新成功”）；
}，（错误）=>{
警报（“错误更新解决方案：+解决方案。\u id”）；
})
}
公共onFilterSolutions（searchInput:string）{
var self=这个；
这个。_ngZone.run（（）=>{
self.solutions=！searchInput？self.cachedSolutions:self.cachedSolutions.filter（函数（解决方案）{
var solutionNameSearch=（-1！==solution.name.toLowerCase（）.indexOf（searchInput.toLowerCase（））；
var metaComponent=self.getMetaComponent（解决方案）；
if（元组件）{
return（-1！==metaComponent.name.toLowerCase（）.indexOf（searchInput.toLowerCase（））| | solutionNameSearch
}否则{
返回解决方案名称搜索；
}
});
});
console.log（this.solutions）；
}
公共添加组件类型（更改解决方案）{
变量solutionComponentType:solutionComponentType=新solutionComponentType({
名称：“无标题”，
描述：“无标题”，
组成部分：[]
});
//noinspection类型ScriptUnsolvedVariable
var sourceSolution:Solution=this.solutions.find（（Solution）=>Solution.\u id==changedSolution.\u id）；
push（solutionComponentType.toJSON（））；
}
公共addComponent（changedComponentType）{
var组件=新解决方案组件({
名称：“无标题”，
描述：“无标题”，
最低成本：0，
最大成本：0，
isDefault:错误
})
changedComponentType.components.push（component.toJSON（））；
}
ngOnInit（）：任何{
返回未定义；
}
}

更新解决方案数组时，html中的NgFor不会刷新

这是html输出：

<div class="container">
    <navigation (onFilterSolutions)="onFilterSolutions($event)">
    </navigation>

    <ul class="solutions">
        <li class="solution" *ngFor="#solution of solutions">
            <h2 class="meta-component">
               <img  class="icon" src="http://studio.seebo.com/{{getMetaComponent(solution).icon}}" />{{ getMetaComponent(solution).name }}
            </h2>
            <input [(ngModel)]="solution.name" (ngModelChange)="updateSolution(solution)"/>
            <input class="description" placeholder="Solution Description" [(ngModel)]="solution.description" (ngModelChange)="updateSolution(solution)"/>
            <ul class="component-types">
                <li class="component-type" *ngFor="#componentType of solution.componentTypes">
                    <label>Component Type Name:</label>
                    <input type="text" [(ngModel)]="componentType.name" (ngModelChange)="updateSolution(solution)"/>

                    <ul class="components">
                        <li class="component" *ngFor="#component of componentType.components">
                            <div>
                                <input type="text" class="full-width" [(ngModel)]="component.name"
                                       (ngModelChange)="updateSolution(solution)"/>
                            </div>
                            <div>
                                <label>Min Cost</label>
                                <input type="number" [(ngModel)]="component.minCost"
                                       (ngModelChange)="updateSolution(solution)"
                                step="0.1"/>
                                <label>Max Cost</label>
                                <input type="number" [(ngModel)]="component.maxCost"
                                       (ngModelChange)="updateSolution(solution)" step="0.1"/>
                            </div>
                        </li>
                        <li>
                            <button (click)="addComponent(componentType)">+</button>
                        </li>
                    </ul>
                </li>
                <li>
                    <button (click)="addComponentType(solution)">+</button>
                </li>
            </ul>
        </li>
    </ul>
</div>

{{getMetaComponent（solution.name}}


组件类型名称：


最低成本
最高成本


+




+

---

希望这是足够的信息，谢谢。

预期的行为是什么。这些代码的哪一部分没有更新？您希望在哪个操作之后更新它？解决方案属性。我认为您应该减少代码。信息技术

<div class="container">
    <navigation (onFilterSolutions)="onFilterSolutions($event)">
    </navigation>

    <ul class="solutions">
        <li class="solution" *ngFor="#solution of solutions">
            <h2 class="meta-component">
               <img  class="icon" src="http://studio.seebo.com/{{getMetaComponent(solution).icon}}" />{{ getMetaComponent(solution).name }}
            </h2>
            <input [(ngModel)]="solution.name" (ngModelChange)="updateSolution(solution)"/>
            <input class="description" placeholder="Solution Description" [(ngModel)]="solution.description" (ngModelChange)="updateSolution(solution)"/>
            <ul class="component-types">
                <li class="component-type" *ngFor="#componentType of solution.componentTypes">
                    <label>Component Type Name:</label>
                    <input type="text" [(ngModel)]="componentType.name" (ngModelChange)="updateSolution(solution)"/>

                    <ul class="components">
                        <li class="component" *ngFor="#component of componentType.components">
                            <div>
                                <input type="text" class="full-width" [(ngModel)]="component.name"
                                       (ngModelChange)="updateSolution(solution)"/>
                            </div>
                            <div>
                                <label>Min Cost</label>
                                <input type="number" [(ngModel)]="component.minCost"
                                       (ngModelChange)="updateSolution(solution)"
                                step="0.1"/>
                                <label>Max Cost</label>
                                <input type="number" [(ngModel)]="component.maxCost"
                                       (ngModelChange)="updateSolution(solution)" step="0.1"/>
                            </div>
                        </li>
                        <li>
                            <button (click)="addComponent(componentType)">+</button>
                        </li>
                    </ul>
                </li>
                <li>
                    <button (click)="addComponentType(solution)">+</button>
                </li>
            </ul>
        </li>
    </ul>
</div>