Нужно знать, как получить вложенные данные из базы данных в Angular 8 - PullRequest
Новая
       6

Нужно знать, как получить вложенные данные из базы данных в Angular 8

1 голос
/ 18 октября 2019

Итак, я создаю систему CRM, использующую БД Firebase в реальном времени и Angular ~ 8.2.8. До сих пор я был в состоянии добавить нового клиента, просмотреть клиента и редактировать клиента. У меня проблема с просмотром вложенного массива в списке Angular DB.

Например, у меня есть клиент, в рамках которого у меня есть оставленные действия и правильные действия. Эти действия выбираются через выпадающее меню. Действия восстановления определены как A1, A2, A3, A4 и т. Д., И вы можете выбрать несколько действий восстановления.

База данных CRM Пример

  • Список клиентов
    • First_Name
    • Фамилия
    • Left_Repair_Actions
      1. 0: «A1»
      2. 1: «A2»
      3. 2: «A3»
      4. 3: «A4»
    • Right_Repair_Actions
      1. 0: «A1»
      2. 1: «A2»
      3. 2:"A3"
      4. 3: "A4"

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

// Здесь я определил массив 

 RepairActions: string[] = ['A1', 'A2', 'A3', 'A4', 'A5'];

// Здесь находится раздел HTML, в котором я вызвал массив, чтобы я мог выбрать действие восстановления для правой стороны 

  <!-- Customer Right Repair Action-->
                <mat-form-field>
                        <mat-label>Left Repair Action Aid Type</mat-label>
                        <mat-select [(value)]="selectedLeftRepairAction" multiple formControlName="left_repair_actions">
                            <mat-option [value]="repairLeftActionType" *ngFor="let repairLeftActionType of RepairActions">
                                {{repairLeftActionType}}
                            </mat-option>
                        </mat-select>
                        <mat-error *ngIf="handleError('right_repair_actions', 'required')">
                            Right Repair Action is required
                        </mat-error>
                    </mat-form-field>

// HTML списка таблиц клиентов, который не будет отображать правильное значение 

<ng-container matColumnDef="right_repair_actions">
                <th mat-header-cell mat-sort-header *matHeaderCellDef> Right Repair Actions </th>
                <td mat-cell *matCellDef="let element"> {{element.right_repair_actions}} </td>
            </ng-container>

// Ее файл TS для таблицы 

dataSource: MatTableDataSource<Customer>;
  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: false }) sort: MatSort;
  CustomerData: any = [];
  displayedColumns: any[] = [
    'repair_date',
    'first_name',
    'last_name',
    'warranty',
    'warranty_ends',
    'left_repair_actions',
    'right_repair_actions',
    'phone',
    'action'
  ];


constructor(private customerApi: CustomerService) {
this.customerApi.GetCustomerList()
  .snapshotChanges().subscribe(customers => {
    customers.forEach(item => {
      let a = item.payload.toJSON();
      a['$key'] = item.key;
      this.CustomerData.push(a as Customer)
    })
    /* Data table */
    this.dataSource = new MatTableDataSource(this.CustomerData);
    /* Pagination */
    setTimeout(() => {
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.dataSource.sortingDataAccessor = (item, property) => {
        switch (property) {
          case 'repair_date': {
            return new Date(item.repair_date);
          }
          default: return item[property];
        }
      };
    }, 0);
  })

Просто показывает объект объекта в таблице и не будет отображать такие значения, как A1, A5, A6, как я хочу. RepairActionExample

...