如何使Types中的单词显示为Chips？

Question

因此，当我进入必须输入类型的上一页时，它会显示为筹码，但是当我进入到下一页的组交付订单表格时，“类型”将显示为常规字词。我也希望它们能像芯片一样，但我不知道怎么办？

HTML

<div fxLayout="column" fxFlex="30" class="mr-8">
  <div *ngIf="mode !== 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
    <mat-form-field appearance="outline" fxFlex>
      <mat-label>Types</mat-label>
      <input name="type" formControlName="type" placeholder="Types" matInput>
    </mat-form-field>
  </div>
  <div *ngIf="mode === 'edit'" class="mb-8" fxLayout="row" fxLayoutAlign="start start">
    <mat-form-field appearance="outline" fxFlex>
      <mat-chip-list #chipList>
          <mat-chip *ngFor="let type of types"
              [selectable]="selectable"
              [removable]="removable"
              (removed)="remove(type)">
              {{type}}
              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input name="type" [matChipInputFor]="chipList" placeholder="Types"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event)" matInput>
      </mat-chip-list>
    </mat-form-field>
  </div>

---

TS

import { DeliveryOrder } from './../delivery-order';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Component, OnInit, Inject, ViewEncapsulation, HostListener } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef, MatChipInputEvent } from '@angular/material';
import { DeliveryOrdersService } from '../delivery-orders.service';
import * as _ from 'lodash';
import { ProfileService } from 'app/services/profile/profile.service';
import {COMMA, ENTER} from '@angular/cdk/keycodes';

@Component({
  selector: 'app-delivery-order-edit',
  templateUrl: './delivery-order-edit.component.html',
  styleUrls: ['./delivery-order-edit.component.scss'],
  encapsulation: ViewEncapsulation.None


})
export class DeliveryOrderEditComponent implements OnInit {

  editDeliveryOrderForm: FormGroup;
  deliveryOrder: DeliveryOrder;
  mode: string;
  selectable = true;
  removable = true;
  addOnBlur = true;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  types: string[];

  constructor(public matDialogRef: MatDialogRef<DeliveryOrderEditComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any,
              private formBuilder: FormBuilder,
              public profile: ProfileService,
              private deliveryOrderService: DeliveryOrdersService) { }


              add(event: MatChipInputEvent): void {
                const input = event.input;
                const value = event.value;
                console.log(`mat chip`, event);
                console.log(`mat chip value`, value);

                // Add our fruit
                if ((value || '').trim()) {

                  this.types.push(value.trim());
                  console.log(`types`, this.types);
                  // let type = this.editDeliveryOrderForm.value.type;
                  // type += ',' + value.trim();
                  this.editDeliveryOrderForm.patchValue({
                    type: this.types.join(',')
                  });
                  this.editDeliveryOrderForm.markAsDirty();
                }

                // Reset the input value
                if (input) {
                  input.value = '';
                }
              }

              remove(type: string): void {
                const index = this.types.indexOf(type);

                if (index >= 0) {
                  this.types.splice(index, 1);
                  this.editDeliveryOrderForm.patchValue({
                    type: this.types.join(',')
                  });
                  this.editDeliveryOrderForm.markAsDirty();
                }


             }

  ngOnInit(): void {
    console.log(`DeliveryOrderEditComponent`, this.data);
    this.deliveryOrder = this.data.order;
    this.mode = this.data.mode;
    if (this.mode === 'edit') {
      this.editDeliveryOrderForm = this.initEditForm();
    } else {
      this.editDeliveryOrderForm = this.initGroupForm();
    }

  }

  initEditForm(): FormGroup {
    const _types = this.deliveryOrder.type.split(',');
    this.types = _types.filter(t => t !== '');
    return this.formBuilder.group(
      {
        address: new FormControl({ value: this.deliveryOrder.address, disabled: true }, [Validators.required]),
        locationName: new FormControl({ value: this.deliveryOrder.locationName, disabled: true }, [Validators.required]),
        remarks: new FormControl(this.deliveryOrder.remarks),
        referenceNo: new FormControl(this.deliveryOrder.referenceNo, [Validators.required]),
        type: new FormControl(this.deliveryOrder.type),
        duration: new FormControl(this.deliveryOrder.duration),
        itemUnits: new FormControl(this.deliveryOrder.itemUnits, [Validators.required]),
        totalVolume: new FormControl(this.deliveryOrder.totalVolume, [Validators.required]),
        totalWeight: new FormControl(this.deliveryOrder.totalWeight, [Validators.required]),
        itemLength: new FormControl(this.deliveryOrder.itemLength, [Validators.required]),
        itemWidth: new FormControl(this.deliveryOrder.itemWidth, [Validators.required]),
        itemHeight: new FormControl(this.deliveryOrder.itemHeight, [Validators.required]),
        itemWeight: new FormControl( { value: this.deliveryOrder.itemWeight, disabled: true }, [Validators.required]),
      }
    );
  }

  initGroupForm(): FormGroup {
    return this.formBuilder.group(
      {
        address: new FormControl(this.deliveryOrder.address, [Validators.required]),
        locationName: new FormControl(this.deliveryOrder.locationName, [Validators.required]),
        remarks: new FormControl(this.deliveryOrder.remarks),
        referenceNo: new FormControl({ value: this.deliveryOrder.referenceNo, disabled: true }, [Validators.required]),
        type: new FormControl({ value: this.deliveryOrder.type, disabled: true }),
        duration: new FormControl({ value: this.deliveryOrder.duration, disabled: true }),
        itemUnits: new FormControl({ value: this.deliveryOrder.itemUnits, disabled: true }, [Validators.required]),
        totalVolume: new FormControl({ value: this.deliveryOrder.totalVolume, disabled: true }, [Validators.required]),
        totalWeight: new FormControl({ value: this.deliveryOrder.totalWeight, disabled: true }, [Validators.required]),
        itemLength: new FormControl({ value: this.deliveryOrder.itemLength, disabled: true }, [Validators.required]),
        itemWidth: new FormControl({ value: this.deliveryOrder.itemWidth, disabled: true }, [Validators.required]),
        itemHeight: new FormControl({ value: this.deliveryOrder.itemHeight, disabled: true }, [Validators.required]),
        itemWeight: new FormControl({ value: this.deliveryOrder.itemWeight, disabled: true }, [Validators.required]),
      }
    );
  }

因此，此表格中类型的字应显示为筹码而不是带逗号的常规字，请问有人该怎么做？

Answer 1

您的类型数组为空，或者将它们放在类型数组中，在ngOnInit（）中添加this.types = this.deliveryOrder.type