調試angular組件不顯示在屏幕上的技巧是什么？

Question

我是 angular 和 angular 材料的新手，我的觀點非常簡單

<div class="mat-headline">Product Inventory Search</div>

<form (ngSubmit)="search()">
  <mat-form-field>
    <mat-label>Product</mat-label>
    <input matInput type="text" [formControl]="product"  />
  </mat-form-field>
</form>

當它顯示時，我看不到任何輸入字段

如果我刪除mat-form-field周圍的form元素，如下所示

<div class="mat-headline">Product Inventory Search</div>

  <mat-form-field>
    <mat-label>Product</mat-label>
    <input matInput type="text" [formControl]="product"  />
  </mat-form-field>

它有效，我可以看到如下所示的產品字段

兩個問題：

• 如何將 angular 材料輸入字段放置在<form>元素內
• 當屏幕上未顯示某些內容時，angular 提供什么工具來調試原因。 就我而言，我沒有看到任何錯誤消息，只是沒有顯示該組件。

Answer 1

經過在黑暗中和博客網站上的許多絆腳石之后，我想通了。

對於 from angular 上的每個表單元素，期望有一個FromControl object 來存儲表單元素的 state。 如果沒有FormControl ，angular 10 不會渲染表單元素，因為它沒有地方管理該元素的 state。 有兩種方法可以創建表單控件。

• 模板驅動，其中 angular 創建FormControl對象
• 開發人員必須在組件class中創建FormControl的反應式

在反應式表單的情況下，可以有多個表單元素，因此必須由開發人員構建FormGroup object 並與表單相關聯。 下面的代碼有效。

<form [formGroup]="searchForm"  (ngSubmit)="search()">
  <mat-form-field>
    <mat-label>Product</mat-label>
    <input matInput type="text" formControlName="product"  />
  </mat-form-field>
  <button mat-button color="primary">search</button>
</form>

我的錯誤版本的主要變化是[formGroup]="searchForm searchForm 和formControlName="product"而不是[formControl]="product"

我對事情的誤解現在已經消除，但我仍在尋找將來更有效地調試此類問題的方法。