Angular2 从后端服务中的数组更新视图

Angular2 Update View from Array in Backend Service

本文关键字：数组 更新 新视图 后端 服务 Angular2      更新时间：2023-09-26

我有一个ListComponent和EntryComponent，用于将项目附加到列表中。当通过数据服务将项目推送到列表中时，列表组件中不会更新该列表。关于 angular2 工作方式的任何想法？

列表服务：

import {Injectable} from "angular2/core";
@Injectable()
export class DataService{
    public items:Array<any> = [];
    addItem(item:string):void{
            this.items.push(item);
            console.log(this.items);
    }
}

简单列表组件：

import { Component, Input, Output } from 'angular2/core';
import {ChangeDetectionStrategy} from "angular2/core";
@Component({
    selector: "list",
    template: "<div><ul><li *ngFor='#item of items'>{{item}}</li></ul>",
    changeDetection:ChangeDetectionStrategy.OnPush
})
export class ListComponent{
    @Input() items:Array<any>;
}

入口组件：

import {Component,EventEmitter, Output} from "angular2/core";
@Component({
    selector:'entry-form',
    template:'<div><input type="text" #myinput (keyup.enter)="emitEntry(myinput)"/></div>'
})
export class EntryComponent{
    @Output() newEntry = new EventEmitter();
    emitEntry(input):void{
        this.newEntry.emit(input.value);
        input.value="";
    }
}

应用组件(根组件(：

import { Component } from 'angular2/core';
import { ListComponent } from './list.component';
import {DataService} from './list-service';
import {EntryComponent} from './entry-form';
@Component({
    selector:'my-app',
    directives:[ListComponent,EntryComponent],
    providers:[DataService],
    template:
        "<list [items]='listService.items' ></list> " +
        "<entry-form (newEntry)='listService.addItem($event)'></entry-form> "
})
export class AppComponent{
    constructor(public listService: DataService){
    }
}

编辑通过将这一行添加到数据服务中的addItem((方法中，我能够产生正确的结果：

this.items = this.items.splice(0,this.items.length-1);

但是，这似乎不是角度2的方式。

提前感谢！

编辑这是代码的跳跃器

删除 'changeDetection：ChangeDetectionStrategy.OnPush'

只需将组件留给：

@Component({
    selector: "list",
    template: "<div><ul><li *ngFor='#item of items'>{{item}}</li></ul>"
})

你可以在这里看到它

对于 ChangeDetectionStrategy.OnPush ，Angular 只会在组件的输入属性中至少有一个发生更改时检查组件的数据绑定(例如模板中的{{item}}(。 另一个重要的信息是，对于数组的输入属性，角度变化检测仅检查数组的引用更改 - 即，它只检查数组引用是否已更改，而不是数组的内容。

由于当您将新项目从服务器push()到数组上时，数组输入属性items继续指向(引用(同一数组，因此角度更改检测不会认为数组已更改，因此不会检测到Listcomponent的输入属性更改，因此它不会检查组件的数据绑定。

删除ChangeDetectionStrategy.OnPush是有效的，因为默认情况下，角度更改检测会检查所有数据绑定，即使输入属性未更改也是如此。 由于数组的每个元素都有绑定，因此更改检测会注意到在重新评估ngFor时有一个新绑定。

相关文章：