1

在此处输入图像描述

然后当用户输入一些数据时，从 DB 中获取的相关甜点列表数据应该以预先填充的 mat-chips 列表格式显示如下：（如果这不可能，我们可以显示一个预先填充的可用甜点列表的下拉列表来自 db 以便用户可以从中进行选择），但已选择的值（重复）不应出现在下拉列表中或通过键入用户再次选择，无论是在对话框仍然打开还是关闭并再次打开时。因为选择的甜点应该是唯一的，因为选择的这个芯片数据将存储在数据库的另一个表中。

在此处输入图像描述

用户可以从可用的显示芯片列表项中删除或添加他想要的任何芯片，然后单击提交。但是这里的条件应该是，一旦选择了一个芯片项（不关闭该项目使其被选中提交），不应该通过再次键入或上次提交后选择重复的芯片项，这意味着：例如，如果我如图所示，预先填充了 5 个芯片项目，用户不应该能够键入新的芯片项目并提交，并且如果选择了芯片 4 和芯片 5 并且芯片 1、芯片 2、芯片 3 从显示的列表中关闭（删除），那么只有没有重复的 1 个芯片 4 和 1 个芯片 5 应该在提交时传递到在按钮单击事件上调用此对话框的页面。再次，当用户打开此对话框时，先前选择的芯片 4 &

我已经尝试完全按照下面的 Angular Material 文档中提到的方式实现各种垫芯片列表的自动完成，但这会打开一个下拉列表，而不是根据所需的格式。

甜点.component.html：

    <div mat-dialog-content>
  <form>
    <div>
        <mat-form-field appearance="outline">
            <mat-label>Dessert*</mat-label>
            <mat-chip-list multiple #chipList>
              <mat-chip
                *ngFor="let dessert of desserts"
                [selectable]="selectable"
                [removable]="removable"
                (removed)="remove(dessert)">
                {{dessert}}
                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
              </mat-chip>
              <input
                placeholder="Dessert Name"
                #dessertInput
                [formControl]="dessertListCtrl"
                [matAutocomplete]="auto"
                [matChipInputFor]="chipList"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur"
                (matChipInputTokenEnd)="add($event)">
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
              <mat-option *ngFor="let dessert of filteredDesserts | async" [value]="dessert">
                {{dessert}}
              </mat-option>
            </mat-autocomplete>
        </mat-form-field>
        <button mat-button (click)="onSubmit()">Submit</button>
      </div>
      </form>
</div>

甜点.component.ts：

export class DessertsComponent{
    
    selectable = true;
    removable = true;
    addOnBlur = true;
    separatorKeysCodes: number[] = [ENTER, COMMA];
    dessertListCtrl = new FormControl();
    filteredDesserts: Observable<string[]>;
    desserts: string[] = [];
    dessertsList: any = [];
    
    @ViewChild('dessertInput',{static: false}) dessertInput: ElementRef<HTMLInputElement>;
    @ViewChild('auto',{static: false}) matAutocomplete: MatAutocomplete;
  
    constructor(
                  private dbService: DBService,
                  public dialogRef: MatDialogRef<DessertsComponent>,
                  @Inject(MAT_DIALOG_DATA) public data: any,
               ) {
                    
                    this.dessertsListData();
                    this.filteredDesserts = this.dessertListCtrl.valueChanges.pipe(
                        startWith(null),
                        map((dessert: string | null) => dessert ? this._filter(dessert) : this.dessertsList.slice()));
                 }  
    dessertsListData(){
      this.dbService.dessertsListData().subscribe(
        (response: any) => {
          this.dessertsList = response;
        });
    }
    add(event: MatChipInputEvent): void {
      if (!this.matAutocomplete.isOpen) {
        const input = event.input;
        const value = event.value;
        
        if ((value || '').trim()) {
            this.desserts.push(value.trim());
        }
        
        if (input) {
          input.value = '';
        }
  
        this.dessertListCtrl.setValue(null);
      }
    }
  
    remove(dessert: string): void {
      const index = this.desserts.indexOf(dessert);
  
      if (index >= 0) {
        this.desserts.splice(index, 1);
      }
    }
    
    selected(event: MatAutocompleteSelectedEvent): void {
      this.desserts.push(event.option.viewValue);
      this.dessertInput.nativeElement.value = '';
      this.dessertListCtrl.setValue(null);
    }
  
    private _filter(value: string): string[] {
      const filterValue = value.toLowerCase();
      return this.dessertsList.filter(dessert => dessert.toLowerCase().indexOf(filterValue) === 0);
    }
    onSubmit(){
      this.dialogRef.close({data: this.desserts});
    }
  }

此甜点组件正在从另一个组件调用 this.dialog.open(DessertsComponent)

我不是 Angular Material(v7) 方面的专家，因此如果为这个问题提供任何解决方案，我将不胜感激。

4

0 回答 0