我正在寻求一些有关使用 Angular Material 7 多重选择的建议。该文档对我想做的事情没有多大帮助。
关于我正在尝试做的事情的一些背景。
因此，我们正在创建一个记录对象，作为其中的一部分，我们需要知道哪些计划资助了他们。 ProgrammeList 是具有 {ProgrammeKey, Name, Description} 的 Program 对象的数组。以前我们使用过单选并且效果很好。问题是每个报告都可以由多个计划资助，因此我们需要使用多重选择。
首先，说到数据库。多选选项如何保存？这个想法是，多重选择将形成自己的选定对象数组，然后将它们传递回后端以保存在链接表中。
我已包含以下相关区域的代码
记录.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;
}
通用组件.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 });
}
通用组件.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">×</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">×</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>
And finally the error
UPDATE
我遇到的主要问题是 dto 不正确并且需要更多值。
There is a new issue where the dropdown is not brought to the front of the view. and instead behind the active model. Is there any css i can apply to resolve this?
预先非常感谢您的帮助
Lewis
对于我们的应用程序，我们使用ngModel代替formControl。我们这样做：
过滤器.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>
and in 过滤器组件.ts
type_list: string[];
auxT: any[] = [];
/**...**/
if (this.type_list != null) {
for (let t of this.type_list) {
auxT.push(t);
}
}
我们不知道这是否是最好的选择，但效果很好