如何正确安装mat-select

Question

我正试图安装元素mat-select，但我不确定如何正确地做到这一点。根据angular，我需要使用以下方法设置它::

angular docs:: https://material.angular.io/components/select/overview

/** @title Select with multiple selection */
@Component({
selector: 'select-multiple-example',
templateUrl: 'select-multiple-example.html',
})
export class SelectMultipleExample {
toppings = new FormControl('');
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

这是my HTML组件

<mat-card>
<mat-spinner *ngIf="isLoading"></mat-spinner>
<form [formGroup]="form" (submit)="onSavePost()" *ngIf="!isLoading">


<!-- element i am trying to install -->
<mat-form-field appearance="fill">
<mat-label>Toppings</mat-label>
<mat-select [formControl]="jobTypes" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>
<!-- element i am tryin to install -->


</form>
</mat-card>

这是我的组件看起来像…请看我添加的评论

@Component({
selector: "app-job-create",
templateUrl: "./job-create.component.html",
styleUrls: ["./job-create.component.css"],
})
export class JobCreateComponent implements OnInit, OnDestroy {
enteredTitle = "";
enteredContent = "";
job: Job;
isLoading = false;
form: FormGroup;
imagePreview: string;
private mode = "create";
private postId: string;
private authStatusSub: Subscription;
jobTypes = new FormControl(''); // how do i install this properly? if I comment out this whole line, i get an error
toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
constructor(
public jobsService: JobsService,
public route: ActivatedRoute,
private authService: AuthService
) {}

ngOnInit() {
this.form = new FormGroup({
// jobTypes: this.jobTypes,  // this line works, but I feel there is a better way of doing this
jobTypes: new FormControl(''), // i wan to use this line, but it does not work when i try to print the content of the form later on
content: new FormControl(null, { validators: [Validators.required] }),
image: new FormControl(null, {
validators: [Validators.required],
asyncValidators: [mimeType],
}),
});
this.route.paramMap.subscribe((paramMap: ParamMap) => {
if (paramMap.has("postId")) {
this.mode = "edit";
this.postId = paramMap.get("postId");
this.isLoading = true;
this.jobsService.getJob(this.postId).subscribe((postData) => {
this.isLoading = false;
this.job = {
id: postData._id,
content: postData.content,
imagePath: postData.imagePath,
creator: postData.creator,
state: "new",
substate: "new",
};
this.form.setValue({
content: this.job.content,
image: this.job.imagePath,
});
});
} else {
this.mode = "create";
this.postId = null;
}
});
}

onSavePost() {
console.log("onSavePost");
if (this.form.invalid) {
console.log("form is not valid!");
return; 
}
this.isLoading = true;
if (this.mode === "create") {
console.log("on create");
console.log("this.form.value:  "+JSON.stringify(this.form.value)); /// i dont see the selected values here
this.jobsService.addJob(this.form.value.content, this.form.value.image);
} else {
console.log("onSavePost():: on update");
console.log()
this.jobsService.updateJob(
this.postId,
this.form.value.title,
this.form.value.content,
this.form.value.image,
this.form.value.state,
this.form.value.substate,
);
}
this.form.reset();
}
ngOnDestroy() {
this.authStatusSub.unsubscribe();
}
}

是否在ngInit()之外不声明jobTypes ?

Answer 1

由于您使用的是包含jobTypes表单控件的FormGroup，请使用formControlName属性。

<form [formGroup]="form" (submit)="onSavePost()" *ngIf="!isLoading">

<mat-form-field appearance="fill">
<mat-label>Toppings</mat-label>
<mat-select formControlName="jobTypes" multiple>
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>
</mat-form-field>

</form>

this.form = new FormGroup({
jobTypes: new FormControl(''), 
...
});