Question

即。我有一个包含3行的表，每行ng-multiselect-dropdown。下拉列表显示正确，我可以设置值。在该行的末尾，我有一个用于删除整行的按钮。

当我单击“删除”按钮时，数据已正确更改，但可见元素并未删除（不刷新）。

当我添加二传手时：

set values(values: any) {
this.valuesValues = values;
}

然后我在浏览器中陷入无限循环。当我在onChange方法中注释发射器时，则只会清除多选。

您有什么想法吗？

模板中的代码

<ng-container>
    <div class="container">
        <div class="row">
          <app-multiselect-dropdown #multi
            class="w-100"
            [data]="data"
            [(values)]="asset.featureGroups"
            (valuesChange)="validate(assetIndex)">
          </app-multiselect-dropdown>
        </div>
    </div>
</ng-container>

<ng-container>
  <div class="text-center pt-2" (click)="removeAsset(assetIndex);">
    <i class="text-danger datatable-row-icon" aria-hidden="true"></i>
  </div>
</ng-container>

共享模块中的代码：

<ng-multiselect-dropdown [placeholder]="'0 selected'"
                         [settings]="settings"
                         [data]="data"
                         [ngModel]="values"
                         (ngModelChange)="onChange($event)">
</ng-multiselect-dropdown>

共享组件：

@Component({
  selector: 'app-multiselect-dropdown',
  templateUrl: './multiselect-dropdown.component.html',
  styleUrls: ['./multiselect-dropdown.component.scss']
})
export class MultiselectDropdownComponent {

  public readonly settings = {
    singleSelection: false,
    idField: 'id',
    textField: 'label',
    itemsShowLimit: 3,
    allowSearchFilter: true,
    enableCheckAll: false
  };

  @Input()
  public data: Option[];

  public valuesValue: any;

  @Output()
  public valuesChange = new EventEmitter<any>();

  @Input()
  get values() {
    return this.valuesValue;
  }

  set values(values: any) {}

  public onChange($event) {
    if ($event !== undefined) {
      this.valuesChange.emit($event.map(value => value.id));
    }
  }
}

具有“删除行逻辑”功能的父组件

public removeAsset(rowIndex: number) {
    if (this.data.length > 1) {
      this.data.splice(rowIndex, 1);
      this.data = [...this.data];
    }
  }

如何从表格中的行动态删除ng-multiselect-dropdown？

0 个答案: