Question

我对使用Angular Material 7多重选择有一些建议。该文档对我想做的事情没有太大帮助。

关于我要做什么的背景知识。

因此，我们正在创建一个记录对象，作为该对象的一部分，我们需要知道什么程序资助了它们。 ProgrammeList是带有{ProgrammeKey，Name，Description}的Program对象的数组。以前，我们使用单选，并且效果很好。问题在于每个报告可以由多个计划资助，因此我们需要使用多重选择。

首先，谈到数据库。多重选择选项将如何保存？想法是，多选将形成其自己的选定对象数组，然后将它们传递回后端以保存在链接表中。

我已经在下面包含了相关区域的代码

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(从数据库中获取数组值);

角材料多选

2 个答案: