Angular 材料在一個組件中工作，但不在另一個組件中

Question

我第一次在 Angular 工作，從事與學校相關的項目。 我試圖通過使用表單輸入材料而不是庫存 HTML forms 來使我的頁面看起來更好一些，並且在我的大多數組件中都取得了巨大的成功。 但是，特別是一個組件沒有將材料標簽識別為有效，即使它們在其他組件中工作正常，在 .HTML 文件實現或 .ts 文件聲明和導入中沒有明顯的（對我而言）差異。

它們在我的登錄組件中工作，如下所示。

登錄.component.html

<form [formGroup]="signInForm" (ngSubmit)="onSubmit(signInForm.value)">
    <mat-form-field>
        <mat-label>Employee ID:</mat-label>
        <input matInput type="number" formControlName="employeeId">
    </mat-form-field>
    <br>
    <mat-form-field>
        <mat-label>Password:</mat-label>
        <input matInput type="password" formControlName="password">
    </mat-form-field>
    <br>
    <button mat-raised-button type="submit">Sign In</button>
    <br>
</form>

相關的.ts 文件在這里。 這還不是全部，只是導入和聲明。

登錄.component.ts

import { Component, OnInit} from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { EmployeeService } from 'src/app/employee/employee.service';
import { Employee } from 'src/app/employee/employee';

@Component({
  selector: 'sign-in',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit{
  private apiUrl = environment.baseUrl + "/api/auth";

  signInForm = new FormGroup({
    employeeId: new FormControl(''),
    password: new FormControl(''),
  });

  errorMsg = null

  constructor(
    private employeeService: EmployeeService,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private http: HttpClient
  ){}
}

當我嘗試在其他組件中實現幾乎完全相同的代碼時，它無法識別標簽。

product-detail.component.html

<h1><b>PRODUCT DETAILS</b></h1>
<form [formGroup]="productDetailsForm" (ngSubmit)="onSubmit(productDetailsForm.value)">
    <div>    
        <mat-form-field>
            <mat-label for="name">Name</mat-label>
            <input matInput id="name" type="text" formControlName="name">
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
            <mat-label for="price">Price</mat-label>
            <input matInput id="price" type="number" formControlName="price">
        </mat-form-field>
    </div>
    <div>    
        <mat-form-field>
            <mat-label for="lookupCode">Name</mat-label>
            <input matInput id="lookupCode" type="text" formControlName="lookupCode">
        </mat-form-field>
    </div>
    <div>
        <mat-form-field>
            <mat-label for="count">Price</mat-label>
            <input matInput id="count" type="number" formControlName="count">
        </mat-form-field>
    </div>
    <button *ngIf="isManager" class="button" type="submit">Save</button>
</form>
<button mat-raised-button *ngIf="isManager" class="button" (click)="deleteClicked()">Delete</button>

相關的.ts 文件如下。

產品詳細信息.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Product } from '../product';
import { ProductService } from '../product.service';
import { ActivatedRoute, Router } from '@angular/router';
import { UserService } from '../../services/user.service';
import { MatFormFieldModule } from '@angular/material/form-field';

@Component({
  selector: 'product-detail-t',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css'],
  providers: [ProductService, UserService]
})
export class ProductDetailComponent implements OnInit {
  @Input() id: string;
  productDetailsForm: FormGroup;
  isManager: boolean;

  constructor(
    private productService: ProductService,
    private userService: UserService,
    private formBuilder: FormBuilder,
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) {
    this.id = this.activatedRoute.snapshot.paramMap.get("id");
    this.productDetailsForm = this.formBuilder.group({
      lookupCode: new FormControl({value: '', disabled: true}),
      price: new FormControl({value: '', disabled: true}),
      name: new FormControl({value: '', disabled: true}),
      count: new FormControl({value: '', disabled: true})
    });
    this.userService.isManager()
      .then((isManager: boolean) => {
        this.isManager = isManager;
        if(isManager) {
          this.productDetailsForm.controls["name"].enable();
          this.productDetailsForm.controls["lookupCode"].enable();
          this.productDetailsForm.controls["count"].enable();
          this.productDetailsForm.controls["price"].enable();
        }
      });
  }
}

下面是我的app.module.ts文件，如果有幫助的話。

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatToolbarModule } from '@angular/material/toolbar';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeModule } from './employee/employee.module';
import { ProductModule } from './product/product.module';
import { TransactionModule } from './transaction/transaction.module';
import { SigninComponent } from './components/signin/signin.component';
import { MainMenuComponent } from './components/main-menu/main-menu.component';
import { PageHeaderComponent } from './components/page-header/page-header.component';

import { HttpRequestInterceptor } from './HttpInterceptor';
import { TransactionPageComponent } from './transaction/transaction-page/transaction-page.component';

@NgModule({
  declarations: [
    AppComponent,
    SigninComponent,
    MainMenuComponent,
    SigninComponent,
    PageHeaderComponent,
    TransactionPageComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    EmployeeModule,
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    ProductModule,
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule
  ],
  exports: [
    MatButtonModule,
    MatCardModule,
    MatInputModule,
    MatFormFieldModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我應該提到登錄組件中的表單是由我的一位小組成員創建的，但他似乎也找不到我的代碼的問題。 任何幫助將不勝感激！

Answer 1

您收到該錯誤可能是因為您尚未在 ProductModule 中導入 MatInputModule 或任何其他 Angular Material 模塊，我相信您的 ProductDetailComponent 已在其中聲明。