Почему datatable не отображается? - PullRequest
Новая
       36

Почему datatable не отображается?

0 голосов
/ 17 июня 2020

Я обновляю данные в своем свойстве Input (). Я консоль и обнаружил, что у него уже есть новые обновленные данные, но я не знаю почему. он не меняется, если я не добавляю новый элемент в массив. 

const foundIndex = this.callTypes.findIndex(x => x.id === value.id);
console.log(foundIndex);
console.log(value);
this.callTypes[foundIndex] = value;

Я полагаю, что приведенный выше код работает (обновите данные в таблице, но это не так). Поэтому я использую ниже хитрый код. Кто-нибудь может мне объяснить? = >>>> Я пытаюсь добавить новый элемент и удалить этот элемент ... 

this.callTypes = [...this.callTypes, value];
this.callTypes.splice(-1);

Вот мой код 

 import { Component, OnInit, ViewChild, Input, OnChanges, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
import { CallerType } from 'src/app/shared/models/caller';
import { APIDefinition, Config, Columns, DefaultConfig, API } from 'ngx-easy-table';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { SettingService } from '../../setting.service';
import { CallType } from 'src/app/shared/models/call';
import { CallTypeModalComponent } from './call-type-modal/call-type-modal.component';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-call-type-table',
  templateUrl: './call-type-table.component.html',
  styleUrls: ['./call-type-table.component.scss']
})
export class CallTypeTableComponent implements OnInit, OnChanges {
  @Input() callTypes: CallType[];

  columns = [
    { key: 'id', title: 'Id', width: '10%'},
    { key: 'nameEN', title: 'English', width: '25%'  }
  ];

  bsModalRef: BsModalRef;

  constructor(private modalService: BsModalService,
              private settingService: SettingService,
              private toastr: ToastrService) {}

  ngOnInit(): void {
  }

  openEditCallTypeModal(callType: CallType){
    const initialState = {
      title: 'Call Type Form',
      data: callType
    };

    this.bsModalRef = this.modalService.show(CallTypeModalComponent, {initialState});
    this.bsModalRef.content.updateCallType.subscribe((value: CallType) => {
      if (value) {
        this.settingService.updateCallType(value).subscribe(() => {

          const foundIndex = this.callTypes.findIndex(x => x.id === value.id);
          console.log(foundIndex);
          console.log(value);
          this.callTypes[foundIndex] = value;
          this.callTypes = [...this.callTypes, value];
          this.callTypes.splice(-1);


          this.ngOnInit();
          this.toastr.success('Updated Successfully');
        });
      }
    }, error => {
      console.log(error);
      this.bsModalRef.content.validationErrors = error.errors;
    });
  }

  openConfirmDialog($event) {}
}

1 Ответ

0 голосов
/ 17 июня 2020

Не уверен, почему, но Angular, похоже, пропускает изменение нового объекта и не обновляется. Вот как это исправить. 

      this.callTypes.splice(-1);

      // not sure what this does.... 
      this.ngOnInit();

      // but you will want this
      this.changeDectorRef.DetectChanges();

      this.toastr.success('Updated Successfully');`enter code here`
...