Angular Material 多 Select

Question

我听取了一些关于使用 Angular Material 7 multi selects 的建议。该文档对我正在尝试做的事情没有太大帮助。

关于我正在尝试做的事情的一些背景知识。

所以我们正在创建一个记录对象，作为其中的一部分，我们需要知道是什么项目资助了他们。 ProgrammeList 是一组具有 {ProgrammeKey, Name, Description} 的 Program 对象。以前我们使用单个 selects 并且效果很好。问题是每个报告都可以由多个项目资助，所以我们需要使用 multi Select.

首先，说到数据库。 multi select 选项将如何保存？这个想法是 multi-select 将形成自己的 selected 对象数组，然后将它们传递回后端以保存在链接 Table 中。

我已经为相关领域包含了下面的代码

record.dto.ts

import {Programme} from "./programme.dto";

export class Record {
    Programme: Programme[];
    CcfLead: string;
    NihrRef: string;
    AddRef: string;
    AwardTitle: string;
    ProjectTitle: string;
    StartDate: Date;
    EndDate: Date;
}

general.component.ts ...

 programmes = new FormControl();
 programmeList: Programme[];

 createRecordFrm() {
        this.recordFrm = this.fb.group({
            Programme : [{}, Validators.required],
            NihrRef: ["", Validators.required],
            AddRef:[""],
            CCFLead: ["", Validators.required],
            AwardTitle: ["", Validators.required],
            ProjectTitle: ["", Validators.required],
            StartDate: Date,
            EndDate: [Date, Validators.required]
        });
    }

    updateRecordFrm(record: Record) {
        this.recordFrm.setValue({
            Programme: record.Programme,
            NihrRef: record.NihrRef,
            AddRef: record.AddRef,
            CCFLead: record.CcfLead,
            AwardTitle: record.AwardTitle,
            ProjectTitle: record.ProjectTitle,
            StartDate: record.StartDate,
            EndDate: record.EndDate
        });
    }

open(content: any, modal?: Record) {
        this.msg = null;
        this.modalMsg = null;

        if (modal != null) {
            this.updateRecordFrm(modal);
            // update recordFrm
        }

        this.activeModal = this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', backdrop: "static", keyboard: false });
    }

general.component.html

<ng-template #recordWizard let-c="close" let-d="dismiss" width="50%">
    <form novalidate (ngSubmit)="saveRecord(recordFrm.value)" [formGroup]="recordFrm">
        <div class="modal-header">
            <h4 class="modal-title" id="modal-basic-title">New Record</h4>
            <button type="button" class="close" (click)="d('Cross Click')">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div *ngIf="modalMsg" role="alert" class="alert alert-info alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <mat-icon>report_problem</mat-icon>
                <span class="sr-only">Error:</span>
                {{modalMsg}}
            </div>

            <div>
                <mat-tab-group>
                    <mat-tab label="First">
                        <div class="form-group">
                            <span>NIHR Reference*</span>
                            <input type="text" class="form-control" readonly formControlName="NihrRef" />
                        </div>
                        <div class="form-group">
                            <span>Additional Reference</span>
                            <input type="text" class="form-control" readonly formControlName="AddRef" />
                        </div>
                        <div class="form-group">
                            <span>Funding Programme:*</span>
                            <mat-select class="form-control" placeholder="Funding Programmes" formControl="programme" multiple [compareWith]="compare">
                                <mat-option *ngFor="let programme of programmeList" [value]="programmeList">{{programme.Description}}</mat-option>
                            </mat-select>
                        </div>
                    </mat-tab>
                    <mat-tab label="Second">
                        Content 2
                    </mat-tab>
                    <mat-tab label="Third">
                        Content 3
                    </mat-tab>
                    <mat-tab label="Fourth">
                        Content 4
                    </mat-tab>
                    <mat-tab label="Fifth">
                        Content 5
                    </mat-tab>
                    <mat-tab label="Sixth">
                        Content 6
                    </mat-tab>
                </mat-tab-group>
            </div>
        </div>
        <div class="modal-footer">
            <div>
                <button type="submit" (click)="c" [disabled]="newRecordFrm.invalid" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Cancel</button>
            </div>

        </div>
    </form>
</ng-template>

最后报错

更新

我遇到的主要问题是 dto 不正确，需要更多值。

出现了一个新问题，即下拉菜单未显示在视图的前面。而不是在活动模型后面。我可以申请 css 来解决这个问题吗？

非常感谢您的帮助

刘易斯

Answer 1

对于我们的应用程序，我们使用 ngModel 而不是 formControl。我们这样做：

Filter.html

<mat-form-field class="ca80">
  <mat-select [(ngModel)]="type_list" multiple name="type_list">
     <mat-option *ngFor="let type of alteration_types" [value]="type.id_type"> {{type.desc}}</mat-option>
  </mat-select>
</mat-form-field>

并在 filter.component.ts

type_list: string[];
auxT: any[] = [];
/**...**/

  if (this.type_list != null) {
      for (let t of this.type_list) {
        auxT.push(t);
      }
    }

我们不知道这是否是最佳选择，但它工作正常

Answer 2

请看这个例子

https://stackblitz.com/edit/angular-material-multi-select?file=app%2Fselect-multiple-example.ts

在上面的示例中，selectedToppings 将包含选定的值，您可以将这些值保存到数据库中并进一步保存。在数据库中，您可以保存字符串数组，在页面加载时，您可以获取该字符串值数组以形成这样的形式

toppings = new FormControl(从数据库获取数组值);

Angular Material 多 Select

Angular Material multi Select

angular

angular7

angular-material-7