Как применить async / await к @inputs в angular

Question

Сначала выполняется ввод, и поэтому значение this._settings по-прежнему равно нулю, чтобы оставить асинхронным, чтобы сначала выполнить настройки, а затем выполнить данные

edit: если я применяю тайм-аут на данные, даже если они имеют значение 1, будут работать нормально

// should be the first
@Input()
  public set settings(value) {
    if (value) {
      this._settings = Object.assign(this.defaultSettings, value);
    } else {
      this._settings = Object.assign(this.defaultSettings);
    }
  }

  @Input()
  public set data(value: Array<any>) {
    if (!value) {
      this._data = [];
    } else {
      this._data = value.map((item: any) =>
        typeof item === 'string' || typeof item === 'number'
          ? new ListItem(item)
           : new ListItem({
          id: item[this._settings.idField],
          text: item[this._settings.textField],
        })
      );
    }
  }

Спасибо за помощь

Answer 1

В вашем примере у вас есть 2 @Input свойства, которые зависят друг от друга.

В этом случае хорошей практикой может быть реализация интерфейса OnChanges на вашем компоненте и перемещение вашей логики. c внутри ngOnChanges реализация метода. Вы сможете обрабатывать различные ситуации в зависимости от текущего значения свойств. Мой совет также состоит в том, чтобы отделить третье вычисленное значение, которое будет результатом вашего логического c кода.

export class MyComponent implements OnChanges {
  @Input settings: SettingsType;
  @Input data: DataType;

  computedData: DataType = [];

  ngOnChanges(changes: SimpleChanges): void {

    // logic
    if (!this.data || !this.settings) {
      this.computedData = [];
    } else {
      // here `data` and `settings` are defined
      //...
    }
  }
}