我一直在尝试为博客发布制作表格，并且我希望在标题旁边有可选择的类别图标。
我制作了一个带有可选字体真棒图标的表单，但是当我选择一个类别时，我无法选择另一个类别来再次更改图标。只有当我在每个选择之间使用“无”选项“重置”它时，它才会改变。
但是，当我更改代码以将图标名称用作字符串而不是作为图标输入时，它会随每次选择而改变，正如我所希望的那样。我只是不明白它如何定期更新文本而不是图标。
这是我的实际代码：
[ create.component.html ]
...
<div class="blog-container">
<mat-card class="blog-card">
<section>
<h2>Create blog post</h2>
</section>
<form [formGroup]="createForm" class="width-1">
<div class="width-1">
<mat-form-field class="blog-title" appearance="outline">
<mat-label>Post Title*</mat-label>
<input matInput formControlName="newTitle" #newTitle>
<mat-icon matSuffix *ngIf="category" [fontSet]="category.set" [fontIcon]="category.icon"></mat-icon>
<mat-hint>the first two fields are required</mat-hint>
</mat-form-field>
</div>
<div class="width-1">
<mat-form-field class="blog-text" appearance="outline">
<mat-label>Bread Text*</mat-label>
<textarea matInput rows="2" formControlName="newText" #newText></textarea>
</mat-form-field>
</div>
<div class="width-1 blog-row">
<mat-form-field class="blog-author" appearance="fill">
<mat-label>Author</mat-label>
<input matInput formControlName="newAuthor" #newAuthor>
</mat-form-field>
<mat-form-field class="blog-category" appearance="fill">
<mat-label>Category</mat-label>
<mat-select [(value)]="category" formControlName="newCategory" #newCategory>
<mat-select-trigger *ngIf="category">
<span>{{category.name}}</span>
</mat-select-trigger>
<mat-option [value]="null">
<span>None</span>
</mat-option>
<mat-option *ngFor="let category of categories" [value]="category">
<mat-icon [fontSet]="category.set" [fontIcon]="category.icon"></mat-icon>
<span>{{category.name}}</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="width-1 center">
<button mat-raised-button color="primary" routerLink="/archive">BACK</button>
<button type="submit" (click)="addPost(title.value, text.value, author.value, category.value)" [disabled]="createForm.pristine || createForm.invalid" mat-raised-button color="primary">POST</button>
</div>
</form>
</mat-card>
</div>
...
[创建.component.ts ]
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { PostService } from '../../post.service';
@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.scss']
})
export class CreateComponent implements OnInit {
createForm: FormGroup;
category: CategoryDTO = null;
categories: CategoryDTO[] = [
new CategoryDTO({name: 'Programming', set: 'fas', icon: 'fa-laptop-code'}),
new CategoryDTO({name: 'Croshetting', set: 'fas', icon: 'fa-cut'}),
new CategoryDTO({name: 'Arts/Crafts', set: 'fas', icon: 'fa-tools'})
];
constructor(private postService: PostService, private fb: FormBuilder, private router: Router) {
this.createForm = this.fb.group({
newTitle: ['', Validators.required],
newText: ['', Validators.required],
newAuthor: '',
newCategory: ''
});
}
addPost(newTitle, newText, newAuthor, newCategory){
this.postService.addPost(newTitle, newText, newAuthor, newCategory).subscribe(() => {
this.router.navigate(['/archive']);
});
}
ngOnInit() {
}
}
class CategoryDTO {
name: string;
set: string;
icon: string;
constructor(category?: any) {
this.name = category && category.name || null;
this.set = category && category.set || null;
this.icon = category && category.icon || null;
}
}
由于我无法在 StackBlitz 中加载 Font Awesome CSS（据我所知），这是我可以在那里重现可管理代码的最接近的方法。
我是 Angular 的新手。