代码之家 › 专栏 › 技术社区 › svgrafov

如何在编辑一个单元格时更新ng2智能表值?

ng2-smart-table angular

0

svgrafov · 技术社区 · 7 年前

在我的应用程序中,我使用 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);
    }
}

1 回复 | 直到 7 年前

1

0

Suryan 7 年前

在您的组件中

  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>

希望这能帮上忙,让你有个想法。。。