发送 Http 请求后更改 @Component 的 @Input 字段（Angular2）

Question

我正在开发一个Angular2 应用程序，其中一个@Components 有一个按钮，单击该按钮将向我的服务器发送post 请求，该请求将以Ok(string) 或BadRequest(string) 响应。

从服务器获得答案后，​​我无法更新我的 @Component 之一的 @Input 字段。

以下是我的一些课程的简化版本。

我的组件类

@Component({
    moduleId: module.id,
    selector: 'model-comp',
    templateUrl: './model.component.html',
    styleUrls: ['./model.component.css']
})
export class MyComponent{
    @Input() model: Model;
    @Output() emitter: EventEmitter<Model> = new EventEmitter<Model>();

    public constructor(private service: MyService){}

    public toggle(): void {
        this.service.send(model.id, model.name){
            .subscribe(
                result  => this.onSuccess(result)),
                error   => this.onError(error),
                ()      => this.onComplete());
    }

    public onSuccess(result: string): void {
        if(result.inculdes("Some Text")) this.model.flag = true;
        else this.model.flag = false;
        this.emitter.emit(this.model);
    }

    public onError(error: any): void {
        //notification using bootstrap-notify
    }

    public onComplete(): void {
        //currently empty
    }
}

我的服务类

export class MyService{

    public send(id: string, name: string){
        return <Observable<string>>this.http
            .post('url', new Dto(id, name))
            .map(result => this.getData<string>(result))
            .catch(this.catchBadResponse);
    }

    private getData<E>(result: Response): E {
        //checking if result.status is ok
        var body = result.json ? res.json(): null;
        return  <E>(body || {});
    }

    private catchBadRespomse: (error: any) => Observable<any> = (error: any) => {
        var response = <Response>error;
        var json = response.json();
        var msg = json.Message;
        var errormsg = json?
            (json.error ? json.error: JSON.stringify(msg?msg:json)) :
            (response.statusText || 'Error?');
        return Obserable.of(errormsg);
    }

}

MyComponent 的模板

<button (click)="toggle()"
[ngClass]="{'class1': true, 'class2': model.flag}">Text</button>

父组件模板

<div *ngFor="let model of getList()">
    <model-comp [model]="model" (emitter)="onEmit($event)"></model-comp>
</div>

onEmit 函数

onEmit(evt: any): void{
    if(evt instanceof Model){
        var evtModel = evt as Model;
        this.list.find(search => search.id == evtModel.id)
            .isFav = evtModel.isFav;
    }
}

问题是，即使我发布了我的数据并收到了响应，我的model 的属性flag 并没有改变。

我认为点击事件会重新加载组件，从而移除EventEmitter 的观察者。

那么有没有什么办法可以取消重载，不丢失EventEmitter的观察者或者任何其他方式来更新根对象或者元素类呢？

Answer 1

我认为您不应该在组件内更改 @input 属性。 它假设监听父组件的变化并采取行动。

Answer 2

更新（见问题下方的 cmets）

如果getList()（*ngFor 绑定到的对象）每次调用时都返回一个新列表，*ngFor 将永远忙于重新呈现项目，因为更改检测会导致getList() 被一次又一次地调用。

绑定到每次直接调用时都会返回新对象或数组的函数会导致严重问题，例如异常和性能大幅下降。

通常强烈建议不要在视图中使用方法/函数调用。而是将列表分配给一个字段并绑定到该字段而不是方法。

ngOnInit() 适用于初始化列表，也适用于初始化或更新列表的任何事件处理程序。

原创

如果您修改从父级传入的model 值，则父级也会看到更改。将值作为事件发出可能是多余的。

我猜你正在修改onEmit() 中的list（来自<div *ngFor="let model of list">），这会导致*ngFor 重新呈现列表。

Answer 3

我的组件.ts

export class MyComponent{
    @Input() model: Model;
    //@Output() emitter: EventEmitter<Model> = new EventEmitter<Model>();

    public constructor(private service: MyService){}

    public toggle(): void {
        this.service.send(model.id, model.name){
            .subscribe(
                result  => this.onSuccess(result)),
                error   => this.onError(error),
                ()      => this.onComplete());
    }

    public onSuccess(result: string): void {
        if(result.inculdes("Some Text")) this.model.flag = true;
        else this.model.flag = false;
        //this.emitter.emit(this.model);
        this.service.emitter.next(false);
    }

    public onError(error: any): void {
        //notification using bootstrap-notify
    }

    public onComplete(): void {
        //currently empty
    }
}

服务

@Injectable // important
export class MyService{
    public emitter: Subject<any> = new Subject();
    public send(id: string, name: string){
        return <Observable<string>>this.http
            .post('url', new Dto(id, name))
            .map(result => this.getData<string>(result))
            .catch(this.catchBadResponse);
    }

    private getData<E>(result: Response): E {
        //checking if result.status is ok
        var body = result.json ? res.json(): null;
        return  <E>(body || {});
    }

    private catchBadRespomse: (error: any) => Observable<any> = (error: any) => {
        var response = <Response>error;
        var json = response.json();
        var msg = json.Message;
        var errormsg = json?
            (json.error ? json.error: JSON.stringify(msg?msg:json)) :
            (response.statusText || 'Error?');
        return Obserable.of(errormsg);
    }

}

现在您可以在应用中的任何位置收听Service.emitter