角。@Input设置 get null 参数,但在 antoher 函数中初始化了值

Angular. @Input set get null parameters but in antoher function values are initialized

提问人:ugglybobby 提问时间:10/5/2023 最后编辑:ugglybobby 更新时间:10/6/2023 访问量:31

问:

父组件这样做:

 protected loadSelectedSource(source: TableSource) {
if (isPresent(source)) {
  this.tableWidgetSettingsService.getTableColumns(source).subscribe((tableColumns) => {
    this.tableColumns = tableColumns;
    this.availableObjectColumnIdentifiers = this.mapColumnsToSortableItems(tableColumns);
    if (this.selectedObjectColumnIdentifiers.length === 0) {
      this.availableObjectColumnIdentifiers.forEach((column) => {
        if (column.position > 0) {
          if (!this.isDuplicateSelectedColumn(column)) {
            this.selectedObjectColumnIdentifiers.push(column);
            if (!isPresent(this.lastInit)) {
              this.formGroupOptions.tableColumns.setErrors(null);
            }
          }
        }
      });
      this.selectedObjectColumnIdentifiers = this.sortByPosition(
        this.selectedObjectColumnIdentifiers,
      );
    }
  });
}

}

子组件接收:

<multi-sortable-selection
            [formatter]="formatColumn"
            [availableItems]="availableObjectColumnIdentifiers"
            (selectedItemsChange)="selectColumns($event, isObjectColumns)"
            [selectedItems]="selectedObjectColumnIdentifiers"    

我的子组件 TS:

@Input() set selectedItems(items: SortableItem[]) {
    this._selectedItems = this.sortByPosition(items);
  }    

如果我只是写@Input selectedItems ...我得到一些值. 但是设置了 @Input() selectedItems(items) ...items 始终为 null,即使有断点,它也永远不会获取值。

但是,如果,另一组:

set availableItems(items) {
        this._availableItems = items;
        this.availableItemsDisplayed = this.sortByFormat(this._availableItems.filter((item) => !isPresent(this._selectedItems.find((item2) => item2.key === item.key))));
        this._selectedItems = this.sortByPosition(this._selectedItems);
    }    

this.selectedItems 获取正确的值!

我的问题:

  • 为什么我的@Input设置...不 cacth 值,而我的@Input有。
  • 为什么this._selectedItems在集合中传入的情况下进行初始化。

谢谢!

  • 断点
  • html很好,我传递了正确的值
角度 输入

评论

0赞 Silvermind 10/5/2023
您有竞争条件。你知道哪个先设置吗?您宁愿将它们更改为普通字段,并使用 ngOnChanges 一次捕获所有更改。
0赞 ugglybobby 10/5/2023
嗨,谢谢。首先设置 selectedItems,然后设置 availableItems。我试过了这个: ''' ngOnChanges(changes: SimpleChanges) { if (changes.availableItems) { this.availableItemsDisplayed = this.sortByFormat( this.availableItems.filter( (item) => !isPresent(this.selectedItems.find((item2) => item2.key === item.key)), ); } if (changes.selectedItems) { this.selectedItems = this.sortByPosition(this.selectedItems); } ''' 但 selectitem 仍然是 null,但我的值显示得很好
0赞 Silvermind 10/5/2023
这是一个反问句,答案实际上是你无法知道的,因为它取决于 angular 编译器的行为。在更改中,您应该检查 但是,如果设置了两个引用并且您在更改中收到 null,那么显然 null 是 null,并且它可能会很快更新,但不够快。也许您可以分享html页面的一些组件代码,以便我们分析问题。现在,没有足够的帮助你。if (changes.availableItems && changes.selectedItems)selectedItems
1赞 ugglybobby 10/5/2023
哈哈,对不起,也是一级。无论如何,我认为我的组件是错误的。我在父组件中处理了我的数据。因此,@Input() selectedItems 显示我想要的内容。感谢您的帮助
0赞 Silvermind 10/6/2023
很高兴你已经想通了。如果它是相关的,你可以用必要的细节来改进你的问题,并发布它的答案。如果没有,您也可以删除您的问题。

答: 暂无答案