Question

我有评分，从postgres数据库获取并显示在表格中。当我编辑评级时，我只能通过来自“TagInputComponent”的输入元素添加或删除标签。

TagInputComponent如下所示：

import { Component, DoCheck, IterableDiffers, OnInit, Input, Output } from 'angular2/core';
import * as _ from 'underscore';

@Component({
    selector: 'taginput',
    templateUrl: 'app/shared/taginput.component.html',
    styleUrls: ['assets/stylesheets/taginput.css']
})
export class TagInputComponent implements OnInit, DoCheck {
@Input() tags: string[];
newTag = '';
oldTags: string[];
differ: any;

constructor(differs: IterableDiffers) { 
    this.differ = differs.find([]).create(null);
}

ngOnInit() { }

ngDoCheck() {
    var changes = this.differ.diff(this.tags);

    if (changes) {
        changes.forEachAddedItem(r => console.log('added ' + r.item));
        changes.forEachRemovedItem(r => console.log('removed ' + r.item));
    }
}

它在DataFormComponenet中使用如下：

<taginput [tags]="datapoint.tags"></taginput>

如果填充了数据，如何创建tags到oldTags的副本？

它注意到ngOnInit()太早，因为服务中尚未提供数据。使用ngDoCheck()时，它始终更新为currentState。

这似乎是一项简单的任务，但我无法找到如何做到这一点。

igorzg的回答对我有用，虽然我把它改成了我的需要。这就是我所做的：

ngDoCheck() {
    var changes = this.differ.diff(this.tags);

    if (changes) {
        if (Array.isArray(changes.collection) && !this.oldTags) {
            this.oldTags = changes.collection.slice();
        }

        changes.forEachAddedItem(r => console.log('added ' + r.item));
        changes.forEachRemovedItem(r => console.log('removed ' + r.item));
    }
}

Answer 1

ngOnChanges(changes) {
   if (Array.isArray(changes.tags) && !this.oldTags) {
     this.oldTags = changes.tags.slice();
   }
}

Answer 2

setter怎么样？

@Input()
set tags(tags: string[]) {
  this.oldTags = tags.slice();
  _tags = tags;
}

如何创建数组初始状态的副本？

2 个答案: