角材料多选
[英] Angular Material multi Select
本文介绍了角材料多选的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对使用 Angular Material 7 多选有一些建议.文档对我正在尝试做的事情没有多大帮助.
关于我正在尝试做的事情的一些背景知识.
所以我们正在创建一个记录对象，作为其中的一部分，我们需要知道哪些计划资助了他们.ProgrammeList 是具有 {ProgrammeKey, Name, Description} 的 Program 对象数组.以前我们使用过单选，效果很好.问题是每个报告都可以由多个程序资助，因此我们需要使用多选.
首先，说到数据库.如何保存多选选项?这个想法是多选将形成自己的选定对象数组，然后将它们传递回后端以保存在链接表中.
我已经包含了以下相关区域的代码
record.dto.ts
import {Programme} from "./programme.dto";导出类记录{程序:程序[]；CcfLead:字符串；NihrRef:字符串；AddRef:字符串；AwardTitle:字符串；项目名称:字符串；开始日期:日期；结束日期:日期；}
general.component.ts...
程序 = new FormControl();程序列表:程序[]；createRecordFrm() {this.recordFrm = this.fb.group({程序:[{}, Validators.required],NihrRef: ["", Validators.required],AddRef:[""],CCFLead: ["", Validators.required],AwardTitle: ["", Validators.required],项目名称:["", Validators.required],开始日期:日期，结束日期:[日期，Validators.required]});}updateRecordFrm(记录:记录){this.recordFrm.setValue({程序:记录.程序，NihrRef: record.NihrRef,AddRef: record.AddRef,CCFLead:记录.CcfLead，AwardTitle: 记录.AwardTitle,项目名称:record.ProjectTitle，开始日期:record.StartDate，结束日期:记录.结束日期});}打开(内容:任何，模态?:记录){this.msg = null;this.modalMsg = null;如果(模态！= null){this.updateRecordFrm(modal);//更新记录框}this.activeModal = this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title', 背景: "static", keyboard: false });}
general.component.html
<form novalidate (ngSubmit)="saveRecord(recordFrm.value)" [formGroup]="recordFrm"><div class="modal-header"><h4 class="modal-title" id="modal-basic-title">新记录</h4><button type="button" class="close" (click)="d('Cross Click')"><span aria-hidden="true">×</span>
<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><mat-icon>report_problem</mat-icon><span class="sr-only">错误:</span>{{modalMsg}}
<div><mat-tab-group><mat-tab label="第一个"><div class="form-group"><span>NIHR 参考*</span><input type="text" class="form-control" readonly formControlName="NihrRef"/>
<div class="form-group"><span>附加参考</span><input type="text" class="form-control" readonly formControlName="AddRef"/>
<div class="form-group"><span>资助计划:*</span><mat-select class="form-control" placeholder="Funding Programmes" formControl="programme" 多个 [compareWith]="compare"><mat-option *ngFor="let program of programList" [value]="programmeList">{{programme.Description}}</mat-option></mat-select>
</mat-tab><mat-tab label="第二个">内容二</mat-tab><mat-tab label="第三个">内容三</mat-tab><mat-tab label="第四个">内容4</mat-tab><mat-tab label="第五个">内容5</mat-tab><mat-tab label="第六个">内容 6</mat-tab></mat-tab-group>
<div class="modal-footer"><div><button type="submit" (click)="c" [disabled]="newRecordFrm.invalid" class="btn btn-primary">保存</button><button type="button" class="btn btn-outline-dark" (click)="c('Save click')">取消</button>
</表单></ng-模板>
最后是错误
更新
我遇到的主要问题是 dto 不正确，需要更多值.
有一个新问题，即下拉菜单没有出现在视图的前面.而是在活动模型后面.我可以申请任何 css 来解决这个问题吗?
非常感谢您的帮助
刘易斯
解决方案
对于我们的应用程序，我们使用 ngModel 而不是 formControl.我们这样做:
过滤器.html
<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[] = [];/**...**/如果(this.type_list ！= null){for (let t of this.type_list) {auxT.push(t);}}
我们不知道这是否是最佳选择，但效果很好
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.
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>
And finally the error
UPDATE
The main issue I had was that the dto was incorrect and needed some more values.
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?
Many thanks in advance for your help
Lewis
解决方案
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>
and in 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屋！
查看全文
