Question

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

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

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

setAsValid方法只是将变量设置为true或false，然后调用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;

对象声明为：

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

innerObject内部有一个变量，它是一个字符串列表。

export class InnerObject {
  extras : string[];
}

现在，在myApp html中，我正在实现另一个名为字符串列表的应用程序组件

<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总是比元素当前字符串在string-list组件中落后一步。

我正在尝试找出导致此断开连接的原因以及如何在不进行大量重构的情况下解决该问题。

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

0 个答案: