Как обновить значение ng2-smart-таблицы при редактировании одной из ячеек? - PullRequest
Новая
       28

Как обновить значение ng2-smart-таблицы при редактировании одной из ячеек?

0 голосов
/ 18 октября 2018

В моем приложении я использую 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 Ответ

0 голосов
/ 18 октября 2018

В вашем компоненте 

  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>

Надеюсь, это поможет, и вы получите представление о начале работы ...

...