Question

在我的应用程序中，我正在使用akveo/ng-2-smart-table。在其中一列中，我将自定义组件与select HTML元素结合使用以从数据中选择一项。选择元素时，我想更新其行中另一个单元格的值。

我该怎么办？

例如，这是我的组件：

@Component({
    selector: 'ngx-template-field-select',
    template: `
        <div class="form-group">
            <select
                    name="fields"
                    class="form-control"
                    (change)="onChange()">

                    <option *ngFor="let field of fields"
                            [value]="field.id">{{ field.name }}</option>
            </select>
        </div>
    `,
})

export class EditTemplateFieldComponent extends DefaultEditor implements OnInit {

    @Input()
    public value: string;

    @Input()
    public rowData: any;

    public fields = [];

    constructor(
        public fieldsService: FieldsService,
    ) {
        super();
    }

    public ngOnInit(): void {
        this.fieldsService.getEntityList().subscribe(
            (value: FieldType[]) => {
                this.fields = value;
            });
    }

    onChange() {
        this.cell.setValue(this.value);
    }
}

Answer 1

在您的组件中

  obj = {
    id: '',
    name: ''
  }

constructor(private fb: FormBuilder) {
  this.demoForm = this.fb.group({
    fields: []
  });
}
// You can look for the value changes of select, which you can subscribe to
this.demoForm.valueChanges.subscribe(
  id => {
    if(id) {
      this.countries.forEach(value => {
      if(value.id === id) {
        this.obj = value;
    }
  })
} else {
  this.obj = null; // or assign for empty object
}

并在您看来

 <div class="form-group">
  <form [formGroup]="demoForm">
        <select formControlName="fields"
                name="fields"
                class="form-control">

                <option *ngFor="let field of fields"
                        [value]="field.id">{{ field.name }}</option>
        </select>
    </div>

<p>{{obj | json}}</p>

希望这对您有所帮助，您就可以开始使用...

如何在编辑其中一个单元格时更新ng2-smart-table值？

1 个答案: