Как изменить имя и значение столбца в таблице матов

Question

Я новичок в Angular. Я использую Angular CLI 8.1.0.

У меня есть 2 api: Пример:

Для банковских реквизитов:

 [
        {
            "strAccountHolderName": "Sarika Gurav",
            "strAccountNumber": "21563245632114531",
            "bankName": "IFSC",
            "ifsc": "IFSC00014",
            "branch": "Tardeo"
        }
    ]

Для KY C подробности

[
    {
        "strCompanyRegNumber": "123456",
        "strGSTNumber": "11242",
        "strAadharNumber": "3412345667",
        "createdOn": "2020-02-01 09:29:19.723600"
    }
]

У меня есть таблица матов на 1-й странице, на которой есть список запросов для банка и ky c. Когда я нажимаю на «предположить» любую строку «банка», то на следующей странице выше информация должна отображаться. Я могу отображать API выше на моей HTML странице. Но я хочу отобразить его в своей таблице матов.

Я хочу изменить имя столбца также в соответствии с запросом.

Теперь в моей таблице матов, если запрос для банка, я хочу отобразить предположим, что только "банковские" реквизиты. Я хочу отобразить такую ​​информацию:

Account Holder Name:Sarika Gurav
Account Number: 21563245632114531
Bank Name: IFSC

И если запрос для KY C

Company Registration Number: 123456
GST Number: 11242
Aadhar Number: 3412345667

Appro.component. html

<h5>Additional Details</h5>
    <table mat-table [dataSource]="additionalDetailsDataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="item">
        <td mat-cell *matCellDef="let services" class="item-name"> {{services.item}} </td>
        </ng-container>

        <ng-container matColumnDef="value">
        <td mat-cell *matCellDef="let services"> {{services.value}} </td>
        </ng-container>

        <tr mat-row *matRowDef="let row; columns: additionalDetailsDisplayedColumns;"></tr>
    </table>

official.component.ts

this.apiService.getVendorById(col,id,rid)
      .subscribe(data=>{
        this.result = data[0]; 
      });

В "результате" я получаю эти API.

Я могу отобразить на html страница такая: {{result?.strAccountHolderName}}

Есть ли способ динамического изменения имени столбца в таблице матов? Заранее спасибо!

Answer 1

сначала внесите изменения в ваш html файл:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="key">
        <td mat-cell *matCellDef="let element" class="item-name"> {{element.key}} </td>
        </ng-container>

        <ng-container matColumnDef="value">
        <td mat-cell *matCellDef="let element"> {{element.value}} </td>
        </ng-container>

        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

в вашем файле ts

 interface Data {
      key: string;
      value: string;
    }
dataSource: Data[] = [];
  displayedColumns: string[] = ['key', 'value'];

 this.apiService.getVendorById(col,id,rid)
      .subscribe(data=>{
      this.result = data[0];

      const newdata: Data[] = [];
      for (const prop in this.result) {
      newdata.push({
      key: [prop],
      value: this.result[prop],
      })
      }     
      this.dataSource = newdata;


});

Answer 2

Не уверен, получил ли я вопрос на 100%, но если вам нужно только изменить имя столбца, вы можете манипулировать этим, добавив заголовок mat:

<h5>Additional Details</h5>
<table mat-table [dataSource]="additionalDetailsDataSource" class="mat-elevation-z1">
    <ng-container matColumnDef="item">
    <th mat-header-cell *matHeaderCellDef>{{ services.header }}</th>
    <td mat-cell *matCellDef="let services" class="item-name"> {{services.item}} </td>
    </ng-container>

    <ng-container matColumnDef="value">
    <td mat-cell *matCellDef="let services"> {{services.value}} </td>
    </ng-container>

    <tr mat-row *matRowDef="let row; columns: additionalDetailsDisplayedColumns;"></tr>
</table>

Если вы хотите изменить таблицу динамически comluns это не так просто. Насколько я знаю, есть два варианта.

1. Вы можете подключить все потенциальные столбцы, которые вам могут понадобиться в. html и .ts, и динамически изменять, какие столбцы отображаются, манипулируя «AdditionalDetailsDisplayedColumns» в вашем файле машинописного текста
2. Если вы не знаете все столбцы заранее или невозможно построить все из них заранее, вы можете воссоздать таблицу по пользовательскому вводу. В этом сценарии вы можете использовать @Input для передачи столбцов. Если вы используете @Input, вы можете сделать это с именами столбцов, а также с любым содержимым. По мере изменений собираются перестроить вашу таблицу.

Answer 3

Чтобы отобразить имя столбца:

    <table mat-table [dataSource]="additionalDetailsDataSource" class="mat-elevation-z1">
        <ng-container matColumnDef="item">
            <th mat-header-cell *matHeaderCellDef>
              INSERT YOUR COLUMN HEADER NAME HERE
            </th>
            <td mat-cell *matCellDef="let services" class="item-name"> {{services.item}} </td>
        </ng-container>
...
        <tr mat-row *matRowDef="let row; columns: additionalDetailsDisplayedColumns;"></tr>
    </table>

Я не был уверен, чего вы хотите достичь в следующей части. Но, может быть, вы хотите Расширяемый ряд ?

Ознакомьтесь с разделом https://material.angular.io/components/table/examples и разделом «Расширяемая строка», чтобы узнать, как его реализовать.