Angular материалов, работающих в одном компоненте, но не в другом

Question

Я впервые работаю в Angular для школьного проекта. Я пытаюсь сделать мои страницы немного лучше, используя материалы для ввода формы вместо стандартных HTML форм, и к большому успеху в большинстве моих компонентов. Однако один компонент, в частности, не распознает теги материала как допустимые, даже если они отлично работают в других, без заметных (для меня) различий ни в реализации файла. HTML, ни в объявлениях и импорте файла .ts.

Они работают в моем компоненте входа, как показано ниже.

sign-in.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 файл здесь. Это еще не все, только импорт и декларации.

sign-in.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 ниже.

product-detail.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

Вы получаете эту ошибку, вероятно, из-за того, что вы не импортировали MatInputModule или любые другие Angular Материальные модули в ProductModule, где я считаю, что ваш ProductDetailComponent объявлен.