Question

场景：

我有一个名为list的组件，该组件在下拉列表中显示我的所有customers。
当我从下拉列表中选择一些客户并点击添加按钮时，我会将这些selected customers(Ex customer 1 & 2)属性（例如电子邮件，电话等）添加到{{1 }}出现在 display 组件中，并且我正在清除下拉菜单值，如下图所示：

预期结果：：当我第二次访问下拉菜单时，如果选择table个客户，我应该可以将3rd & 4th个客户与{{1} }客户是这样的：

现在我要添加3rd & 4th个客户，但它会像这样覆盖先前的客户（第1和第2个）：

但是我想添加新客户以及以前的客户，如第二张图片所示。

DEMO

Answer 1

我将每个选定的对象存储在列表中，然后将其用作dataSource属性：

并更新DataSource属性，例如：

this.dataSource = new MatTableDataSource(your_list)

HTML代码：

<div>
    <h3>Display</h3>
    <form [formGroup]="displayForm">
                                          \/
        <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
            <!-- Name Column -->
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef> Name </th>
                <td mat-cell *matCellDef="let element">{{element.name}}</td>
            </ng-container>
            <!-- Email Column -->
            <ng-container matColumnDef="email">
                <th mat-header-cell *matHeaderCellDef> Email </th>
                <td mat-cell *matCellDef="let element">{{element.email}}</td>
            </ng-container>
            <!-- Phone Column -->
            <ng-container matColumnDef="phone">
                <th mat-header-cell *matHeaderCellDef> Phone </th>
                <td mat-cell *matCellDef="let element">{{element.phone}}</td>
            </ng-container>
            <!-- Button Column -->
            <ng-container matColumnDef="button" stickyEnd>
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let element">
                    <mat-icon>delete</mat-icon>
                </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <br>
<button color="accent" mat-flat-button class="Update-btn" (click)="onSave()">Save</button>

</form>  
</div>

TS代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ICustomer } from '../models';
import { DataService } from '../data.service';
import { MatTableDataSource, MatDialog } from '@angular/material';

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {
  public contacts: ICustomer;
  public selectedCustomers: any[] = [];
  public displayForm: FormGroup;
  public addCustomer: any;
  dataSource = new MatTableDataSource([]);

  list: any[] = []

  public displayedColumns: string[] = ['name', 'email', 'phone', 'button'];

  constructor(private fb: FormBuilder, public dataService: DataService) { }

  public async ngOnInit(): Promise<void> {
    this.displayForm = this.fb.group({
    });
    this.dataService.onSelectCustomer.subscribe(value => {
      if (value) {
        for (var i = 0; i < value.CustomerIds.length; i++) {
          this.list.push(value.CustomerIds[i])
          this.dataSource = new MatTableDataSource(this.list)
        }
        console.log(this.list)
      }
    });
  }

  public onSave(): void {
    this.addCustomer = this.selectedCustomers;
    //console.log(this.addCustomer)
    var arr = this.addCustomer.CustomerIds.map(value => value.id);

    console.log(arr);
  }
}

Stackblitz

Answer 2

您应该检查对象是否存在，否则按如下所示进行推送-

this.dataService.onSelectCustomer.subscribe(value => { 
      if (value.CustomerIds && value.CustomerIds.length){
        if (this.selectedCustomers && this.selectedCustomers.CustomerIds) {
          value.CustomerIds.forEach(ele => {
            this.selectedCustomers.CustomerIds.findIndex(obj => obj.id == ele.id) !== -1 ?  "" : this.selectedCustomers.CustomerIds.push(ele);
          });
        } else {
          this.selectedCustomers = value;
        }
      }
    });

Working Example

避免在表格组件中过度覆盖注入的对象

2 个答案: