角材料多选 [英] Angular Material multi Select
问题描述
我对使用Angular Material 7多重选择有一些建议.该文档对我想做的事情没有太大帮助.
I'm after a bit of advice with using Angular Material 7 multi selects. The documentation doesn't help that much with what I'm trying to do.
关于我要做什么的背景知识.
Bit of a background on what I'm trying to do.
因此，我们正在创建一个记录对象，作为该对象的一部分，我们需要知道什么程序资助了它们.ProgrammeList是带有{ProgrammeKey，Name，Description}的Program对象的数组.以前，我们使用单选，并且效果很好.问题在于每个报告可以由多个计划资助，因此我们需要使用多重选择.
So we are creating a record object and as part of that we need to know what Programme Funded them. The ProgrammeList is an array of Programme objects with {ProgrammeKey, Name, Description}. Previously we have used single selects and it works great. The issue is that each report can be funded by multiple Programmes so we need to use the multi Select.
首先，谈到数据库.多重选择选项将如何保存?想法是，多选将形成其自己的所选对象数组，然后将它们传递回后端以保存在链接表中.
Firstly, When it comes to the database. How will the multi select options be saved? The idea was that the multi-select would form its own array of selected objects and then pass them back to the back end to be saved in a Linking Table.
我已经在下面包含了相关区域的代码
I have included the code below for the relevant areas
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">×</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>
最后是错误
更新
我遇到的主要问题是dto不正确，需要更多值.
The main issue I had was that the dto was incorrect and needed some more values.
出现了一个新问题，该下拉菜单没有出现在视图的前面.而是在活动模型后面.我可以申请解决任何CSS问题吗?
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?
在此先感谢您的帮助
刘易斯
推荐答案
对于我们的应用程序，我们使用 ngModel 而不是 formControl .我们这样做:
For our application, we use ngModel instead of formControl. We do it like this:
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);
}
}
我们不知道这是否是最好的选择，但是效果很好
We don't know if this is the best option, but it works fine
这篇关于角材料多选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
