angular - Angular，使用 ngForm 和 EventEmitters，变量总是落后一步

Question

在我的一个组件中，我需要设置一个变量，该变量等于我用作 HTML 属性/角度指令的另一个变量...

在此组件 HTML 中，我有以下代码 -

<div>
  <app-myapp> [object]="myobject" (validate)="setAsValid($event)"> ....

该setAsValid方法只是将一个变量设置为真或假，然后调用一个handleChanges应该将另一个变量设置为的方法myobject（应该从myapp检索）

setAsValid(ev: boolean) {
    this.isValid = ev;
    this.handleChanges();
  }

handleChanges() {
    if (this.myobject) {
      this.parent.object = JSON.stringify(this.myobject);
    }
  }

所以我myobject在这个组件打字稿中有一个变量，并将它链接到 [object] ...

在myapp.component.ts我有这样声明的对象-

@Input() object: Object;
@Output() validate = new EventEmitter<boolean>();
@ViewChild(NgForm) form;

Object声明如下：

export class Object {
  name: string;
  type: string;
  innerObject: InnerObject;
}

里面innerObject有一个变量，它是一个字符串列表。

export class InnerObject {
  extras : string[];
}

现在，在myApp html 中，我正在实现另一个应用程序组件，称为 string-list

<app-string-list (valuesChange)="validateModel()"
        [(values)]="object.innerObject.extras" [label]="'Add Extra'"
        [placeholder]="'Extras'"></app-string-list>```

该validateModel函数只是调用EventEmitter

validateModel() {
    this.validate.emit(this.form.valid);
  }

valuesChange在string-list-component.ts中声明-

这就是该课程的设置方式-

class Elem {
  val: string;
}

@Component({
  selector: 'app-string-list',
  templateUrl: './string-list.component.html',
})
export class StringListComponent implements OnInit {
  _elems: Elem[];

  @Input()
  label = 'Add';

  @Input()
  placeholder: String;

  @Input()
  style = '';

  @Input()
  get values(): string[] {
    return this._elems.map(e => e.val);
  }

  private subject = new Subject();

  @Output()
  valuesChange = new EventEmitter();

  set values(val: string[]) {
    this._elems = val.map(v => <Elem>{'val': v, 'name': UUID.UUID(), 'style': this.style});
  }

  notifyUpdate(val: string[]) {
    this.valuesChange.emit(this._elems.map(e => e.val).filter(val => val && val.trim().length > 0));
    this.subject.next();
  }

  trackByFn(index) {
    return index;
  }

  add() {
    if (!this._elems) {
      this._elems = [];
    }

    this._elems.push(new Elem());
  }

  delete(index) {
    this._elems.splice(index, 1);
    this.notifyUpdate();
    this.valuesChange.emit(this._elems.map(e => e.val));
  }

  ngOnInit() {
  }

  public onChange() {
    return this.subject.asObservable();
  }
}

我的问题是，每当我在字符串列表组件中进行更改时，我的更改都会记录到该类中的变量中，但是，在我上面发布的第一个组件中，myobject总是落后一步。

换句话说，如果我在页面上该组件内的该字符串列表元素中添加一个字母，则试图获取该组件的顶级父组件

[object]="myobject"

会失败，因为myobject它仍然是以前的字符串，然后如果我删除我添加myobject的那个字母，那么它的末尾就会有那个字母。所以myobject总是比字符串列表组件中元素中的当前字符串落后一步。

我试图找出导致这种断开连接的原因以及如何在不进行大量重构的情况下修复它。

标签： angulartypescriptangular2-formsangular2-directives