将 <mat-icon> 从一个 <mat-form-field> 更新到另一个 <mat-form-field> 不会持续更新图标

Question

我一直在尝试制作用于博客发布的表单，我希望标题旁边有 select 可用的类别图标。

我制作了一个带有 select 字体很棒的图标的表单，但是当我 select 一个类别时，我无法 select 另一个类别来再次更改图标。它只有在我 "reset" 每个 selection."None" 选项 in-between 时才会改变。

但是，当我更改代码以将图标名称用作字符串而不是图标输入时，它会随着每个 selection 的变化而变化，正如我所希望的那样。我只是不明白它怎么会定期更新文本而不是图标。

这是我的实际代码：
[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>
...

[create.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（据我所知），this is the closest I could come to reproducing a manageable code there。

我是 Angular 的新手。

Answer 1

我在我的 create.component.ts 文件中导入了 FormsModule 和 CommonModule（FontAwesomeModule 已经存在），然后我在 [=22= 中重新添加了 node_modules/@fortawesome/fontawesome-free/css/all.min.css ] 在 angular.json 中，成功了！
据我所知，import { faCut, faCode, faTools } from '@fortawesome/free-solid-svg-icons'; 在 create.component.ts 中没有区别。
感谢 "Allabakash" 为我指明了正确的方向。 :)

将 <mat-icon> 从一个 <mat-form-field> 更新到另一个 <mat-form-field> 不会持续更新图标

Updating <mat-icon> from one <mat-form-field> to another doesn't consistently update the icon

html

javascript

angular

angular-fontawesome