下拉列表时如何在表格上显示名称

Question

I am creating my own custom inline editable table. I am not able to show the dropdown assigned name. For example I have dropdown data like this:

statusDropdownData = [
    {
      statusId: 3,
      name: "test 1",
    },
    {
      statusId: 4,
      name: "test 2",
    },
  ];

On table I am able to see the ID, but I want to see the name, and based on id, when i click on edit button, that id should patch. But I am not able to do it. I tried this.

my custom component for table html

<a (click)="addNew()" class="mb-1 ml-1">Add New</a>
<table class="row-border table-bordered-no-confilct border-1 table">
  <thead>
    <tr>
      <th *ngFor="let head of headers">
        {{ head.name }} <span class="text-danger" *ngIf="head.required">*</span>
      </th>
    </tr>
  </thead>

  <tr *ngFor="let tableData of data; let i = index">
    <td>
      <ng-container *ngIf="tableData.buttonStatus === true">
        <i
          class="ace-icon fa fa-pencil-square-o bigger-150 text-success"
          data-toggle="tooltip"
          title="Edit"
          *ngIf="!tableData.isEditable"
          (click)="onEdit(tableData)"
        ></i>
        <i
          class="ace-icon fa fa-trash-o bigger text-danger ml-1"
          data-toggle="tooltip"
          title="Delete"
          *ngIf="!tableData.isEditable"
          (click)="onDelete(tableData)"
        ></i>

     
      </ng-container>
      <i
        class="ace-icon fa fa-floppy-o bigger-150 text-success"
        data-toggle="tooltip"
        title="Save"
        *ngIf="tableData.isEditable"
        (click)="onSave(tableData)"
      ></i>
      <i
        class="ace-icon fa fa-times bigger-150 text-danger ml-1"
        data-toggle="tooltip"
        title="Cancel"
        *ngIf="tableData.isEditable"
        (click)="cancel(tableData, i)"
      ></i>
    </td>
    <td>{{ i + 1 }}</td>
    <ng-container *ngIf="tableData.isEditable; else viewable">
      <ng-container *ngFor="let head of headers">
        <ng-container *ngIf="head.mappedProperty">
          <td>
            <input
              *ngIf="
                head.dataType === 'text' ||
                head.dataType === 'number' ||
                head.dataType === 'checkbox'
              "
              [type]="head.dataType"
              [(ngModel)]="tableData[head.mappedProperty]"
              [checked]="tableData[head.mappedProperty]"
            />
       

            <my-custom-dropdown
              *ngIf="head.dataType === 'dropdown'"
              [data]="head.dropDownData"
              [config]="head.dropdownConfig"
              [(selectedModel)]="tableData[head.dropdownConfig.bindValue]"
            ></my-custom-dropdown>
          </td>
        </ng-container>
      </ng-container>
    </ng-container>

    <ng-template #viewable>
      <ng-container *ngFor="let head of headers">
        <ng-container *ngIf="head.mappedProperty">
          <td>{{ head.dataType ==='dropDown' ? tableData[head.mappedName]: tableData[head.mappedProperty] }}</td>
        </ng-container>
      </ng-container>
    </ng-template>
  </tr>
</table>

its ts

 @Input() data;
  @Input() headers;
  @Output() modelData: EventEmitter<object> = new EventEmitter<object>();
  @Output() deleteData: EventEmitter<object> = new EventEmitter<object>();
  @Output() moveUpData: EventEmitter<object> = new EventEmitter<object>();
  @Output() moveDownData: EventEmitter<object> = new EventEmitter<object>();
  private newFieldCounter: number = 0;
  isNew = false;
  copyOfOriginalData;
  constructor(
    private alertService: ToasterService,
    private confirmationDialogService: ConfirmDialogService
  ) {}

  onEdit(data): void {
    for (let i = 0; i < this.data.length; i++) {
      if (i == data) {
        this.data[i].buttonStatus = true;
      } else {
        this.data[i].buttonStatus = false;
      }
    }
    this.isNew = false;
    this.copyOfOriginalData = { ...data };
    this.data.map((item) => {
      item.isEditable = data.id === item.id;
    });
    console.log('selected', data);
    console.log('data on edit', this.data )
  }

  onSave(data): void {
    let requiredColumns = [];
    this.headers.forEach((headers) => {
      if (headers.required === true) {
        requiredColumns.push(headers.mappedProperty);
      }
    });

    let isEmpty = false;
    requiredColumns.forEach((columnsData) => {
      if (data[columnsData] === "" || !data[columnsData]) {
        console.log("req", requiredColumns);
        this.alertService.error(columnsData + " can not be empty");
        isEmpty = true;
      }
    });
    if (!isEmpty) {
      this.modelData.emit(data);
      data.isEditable = !data.isEditable;
    }
  }

  onDelete(data): void {
    this.confirmationDialogService
      .confirm("", "Are you sure you want to remove this user?")
      .subscribe((action) => {
        if (action) {
          this.deleteData.emit(data);
        }
      });
  }

  moveDown(data): void {
    this.moveDownData.emit(data);
  }

  moveUp(data): void {
    this.moveUpData.emit(data);
  }

  cancel(data, index): void {
    if (this.isNew) this.data = this.data.filter((x) => !(x.id === data.id));
    else this.data[index] = { ...this.copyOfOriginalData };

    for (let i = 0; i < this.data.length; i++) {
      this.data[i].buttonStatus = true;
    }
    data.isEditable = !data.isEditable;
  }

  addNew(): void {
    this.isNew = true;
    this.data.push({
      id: "a" + this.newFieldCounter++,
      isEditable: true,
    });
  }

  addRequiredKeys(): void {
    this.data = this.data.map((item) => ({
      ...item,
      isEditable: false,
      buttonStatus: true,
    }));
    console.log("key added", this.data);
  }

  ngOnInit(): void {
    this.addRequiredKeys();
    console.log("header", this.headers);
  }

consuming component

 data = [
    {
      id: 1,
      name: "ashish",
      mobile: "8788888888",
      date: "11-10-2021",
      statusId: 3,
      jobReady: true,
    },
    {
      id: 2,
      name: "mishra",
      mobile: "9788888888",
      date: "11-11-2021",
      statusId: 4,
      jobReady: false,
    },
    // {
    //   id: 3,
    //   name: "demo",
    //   mobile: "9788888888",
    //   date: "11-11-2021",
    //   isEditable: false,
    // },
  ];

  statusDropdownData = [
    {
      statusId: 3,
      name: "test 1",
    },
    {
      statusId: 4,
      name: "test 2",
    },
  ];

  jobDropDownConfig: DropdownConfig = {
    bindLabel: "name",
    bindValue: "id",
    placeholder: "Select Job",
  };
  demoDropDownConfig: DropdownConfig = {
    bindLabel: "name",
    bindValue: "statusId",
    placeholder: "Select Status",
  };

  //datePickerConfig: DatePickerConfig ;

  datePickerConfig: DatePickerConfig = {
    propertyConfig: {
      datePicker: true,
      rangePicker: false,
      inlineDatePicker: false,
      inlineDateRangePicker: false,
      placeholder: "Date Picker",
      hideOnScroll: true,
    },
  };
  constructor() {
    this.datePickerConfig = new DatePickerConfig();
  }
  headers: Array<TableHeaders> = [
    { name: "Edit" },
    { name: "Sr.No" },
    { name: "name", dataType: "text", mappedProperty: "name", required: true },
    {
      name: "mobile",
      dataType: "number",
      mappedProperty: "mobile",
      required: true,
    },
    {
      name: "date",
      dataType: "date",
      mappedProperty: "date",
      datePickerConfig: this.datePickerConfig,
    },
    {
      name: "job",
      dataType: "dropdown",
      mappedProperty: "id",
      dropDownData: this.data,
      dropdownConfig: this.jobDropDownConfig,
      required: true,
    },
    {
      name: "Status",
      dataType: "dropdown",      
      mappedName:'name',
      mappedProperty: "statusId",
      dropDownData: this.statusDropdownData,
      dropdownConfig: this.demoDropDownConfig,
    },
    {
      name: "Job Ready",
      dataType: "checkbox",
      mappedProperty: "jobReady",
    },
  ];

  modelData(data) {
    console.log("data", data);
  }

  deleteData(data) {
    console.log("deleted data", data);
  }

Answer 1

The parameter of onEdit is of type:

{
      id: number,
      name: string,
      mobile: string,
      date: string,
      statusId: number,
      jobReady: boolean,
},

So you should change your onEdit here:

onEdit(data): void {
    for (let i = 0; i < this.data.length; i++) {
      if (i == data.id) {                           // <--- change, add  .id
        this.data[i].buttonStatus = true;
      } else {
        this.data[i].buttonStatus = false;
      }
    }
    this.isNew = false;
    this.copyOfOriginalData = { ...data };
    this.data.map((item) => {
      item.isEditable = data.id === item.id;
    });
    console.log('selected', data);
    console.log('data on edit', this.data )
  }