小贝子编程

Angular Mat-Form导致网页崩溃而没有错误代码



我正在构建一个Angular应用程序，它一直工作得很好，直到我添加mat- form-field来构建一个多选项下拉列表。由于某种原因，每当将mat-form-field块添加到代码中时，网页就会崩溃。我试过把代码的各个部分注释出来，发现错误似乎是mat-form-field，但是我的编译器没有给我任何错误。

selection-page.component.html

<div class=" content">
<div class=" row">
<div class=" col-md-12">
<div class=" card">
<div class=" card-body">
<div class=" places-buttons">
<div class=" row">
<div class=" col-md-6">
<h2 class=" card-title">Ingest RDBMS</h2>
</div>
</div>
<div class=" row">
<div class=" col-md-12 ml-auto mr-auto text-center">
<div class=" row d-flex justify-content-center">

<div class=" col-sm-1 col-2">
<span style="font-size: 250%;" class="text-light"><i class="fas fa-check-circle"></i></span>
<p style="font-size: 10px;">Source data</p>
</div>
<div class=" col-sm-1 col-1">
<span class="text-primary" style="font-size: 150%;"><i class="fas fa-arrow-right"></i></span>
</div>
<div class=" col-sm-1 col-3">
<span class="text-light" style="font-size: 250%;"><i class="fas fa-check-circle"></i></span>
<p style="font-size: 10px;">Configure Ingestion</p>
</div>
<div class=" col-sm-1 col-1">
<span class="text-primary" style="font-size: 150%;"><i class="fas fa-arrow-right"></i></span>
</div>
<div class=" col-sm-1 col-2">
<span  class="text-light" style="font-size: 250%;"><i class="fas fa-check-circle"></i></span>
<p style="font-size: 10px;">Filter Table</p>
</div>
<div class=" col-sm-1 col-1">
<span  class="text-primary" style="font-size: 150%;"><i class="fas fa-arrow-right"></i></span>
</div>
<div class=" col-sm-1 col-2">
<span  class="text-primary" style="font-size: 250%;">④</span>
<p style="font-size: 10px;">Queuing Table</p>
</div>
<div class=" col-sm-1 col-1">
<span class="text-primary" style="font-size: 150%;"><i class="fas fa-arrow-right"></i></span>
</div>
<div class=" col-sm-1 col-2">
<span  class="text-light" style="font-size: 250%;">⑤</span>
<p style="font-size: 10px;">Configuration Details</p>
</div>
</div>
</div>
</div>
<br>
<br>

</div>
</div>
</div>
</div>
<div class=" col-lg-12 ml-auto mr-auto">
<div class=" card">
<div class=" card-header">
</div>
<div class=" card-body">
<div class="row">
<div class="col-md-6">
<form class="form-inline ml-auto">
<div class="form-group no-border">
<div class="input-group-prepend">
<div> <!--Selection Page Module-->
<div class="row">
<div class="col" id="border"> <!--Database-->
<div>
<h4>Database Selection</h4>
<mat-form-field appearance="fill">
<mat-label>Database</mat-label>
<mat-select [formControl]="databaseControl" multiple>
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of databaseGroups" [label]="group.name"
[disabled]="group.disabled">
<mat-option *ngFor="let database of group.database" [value]="database.value">
{{database.viewValue}}
</mat-option>
</mat-optgroup>
</mat-select>
<mat-hint></mat-hint>
</mat-form-field>
</div>
</div>
</div>
<div class="row">
<div class="col" id="border"> <!--Table-->
<h4>Table Selection</h4>
<mat-form-field appearance="fill">
<mat-label>Table</mat-label>
<mat-select [formControl]="tableControl" multiple>
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of tableGroups" [label]="group.name"
[disabled]="group.disabled">
<mat-option *ngFor="let table of group.table" [value]="table.value">
{{table.viewValue}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
</div>
<div class="col" id="border"> <!--Column-->
<h4>Column Selection</h4>
<mat-form-field appearance="fill">
<mat-label>Column</mat-label>
<mat-select [formControl]="columnControl" multiple>
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of columnGroups" [label]="group.name"
[disabled]="group.disabled">
<mat-option *ngFor="let column of group.column" [value]="column.value">
{{column.viewValue}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>      
</form>     
</div>
</div>
<br><br>
</div>
<div class=" card-footer">
<div class="row">
<div class="col-md-6 col-sm-6 col-6 ">
<button class="btn btn-default mr-2" routerLink="/home">Cancel</button>
<button class="btn btn-success"><i class="fas fa-file"></i>  Save as Draft</button>
</div>
<div class="col-md-6 col-sm-6 col-6 d-flex justify-content-end">
<button class="btn btn-primary" routerLink="/ingestions/rdbms/filterTable">Previous</button>
<button class="btn btn-primary" routerLink="/ingestions/streamdata/configureIngestion">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>

app.module.ts

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { RouterModule } from "@angular/router";
import { ToastrModule } from 'ngx-toastr';
import { AppComponent } from "./app.component";
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { AppRoutingModule } from "./app-routing.module";
import { ComponentsModule } from "./components/components.module";
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatCardModule } from '@angular/material/card';
import { SelectionPageComponent } from './pages/ingestions/rdbms/pages/selection-page/selection-page.component';
import {MatNativeDateModule} from '@angular/material/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {DemoMaterialModule} from './material-module';
import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';

@NgModule({
imports: [
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
ComponentsModule,
NgbModule,
RouterModule,
AppRoutingModule,
ToastrModule.forRoot(),
MatNativeDateModule,
BrowserModule,
DemoMaterialModule,

],
exports: [
DragDropModule,
MatCardModule
],
declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, SelectionPageComponent],
bootstrap: [AppComponent],
providers: [
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },

]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

selection-page.component.ts

import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';
interface Database {
value: string;
viewValue: string;
}
interface DatabaseGroup {
disabled?: boolean;
name: string;
database: Database[];
}
interface Table {
value: string;
viewValue: string;
}
interface TableGroup {
disabled?: boolean;
name: string;
table: Table[];
}
interface Column {
value: string;
viewValue: string;
}
interface ColumnGroup {
disabled?: boolean;
name: string;
column: Column[];
}
interface BranchDatabase {
value: string;
viewValue: string;
}
interface BranchDatabaseGroup {
disabled?: boolean;
name: string;
branchDatabase: BranchDatabase[];
}
@Component({
selector: 'app-selection-page',
templateUrl: './selection-page.component.html',
styleUrls: ['./selection-page.component.scss']
})
export class SelectionPageComponent implements OnInit {
databaseControl = new FormControl();
databaseGroups: DatabaseGroup[] = [
{
name: 'List 1',
database: [
{value: 'database-1', viewValue: 'Database-1'},
{value: 'database-2', viewValue: 'Database-2'},
{value: 'database-3', viewValue: 'Database-3'}
]
},
{
name: 'List 2',
database: [
{value: 'database-1', viewValue: 'Database-1'},
{value: 'database-2', viewValue: 'Database-2'},
{value: 'database-3', viewValue: 'Database-3'}
]
}
]
tableControl = new FormControl();
tableGroups: TableGroup[] = [
{
name: 'List 1',
table: [
{value: 'table-1', viewValue: 'Table-1'},
{value: 'table-2', viewValue: 'Table-2'},
{value: 'table-3', viewValue: 'Table-3'}
]
},
{
name: 'List 2',
table: [
{value: 'table-1', viewValue: 'Table-1'},
{value: 'table-2', viewValue: 'Table-2'},
{value: 'table-3', viewValue: 'Table-3'}
]
}
]
columnControl = new FormControl();
columnGroups: ColumnGroup[] = [
{
name: 'List 1',
column: [
{value: 'column-1', viewValue: 'Column-1'},
{value: 'column-1', viewValue: 'Column-2'},
{value: 'column-1', viewValue: 'Column-3'}
]
},
{
name: 'List 2',
column: [
{value: 'column-1', viewValue: 'Column-1'},
{value: 'column-2', viewValue: 'Column-2'},
{value: 'column-3', viewValue: 'Column-3'}
]
}
]
branchDatabaseControl = new FormControl();
branchDatabaseGroups: BranchDatabaseGroup[] = [
{
name: 'List 1',
branchDatabase: [
{value: 'column-1', viewValue: 'Column-1'},
{value: 'column-1', viewValue: 'Column-2'},
{value: 'column-1', viewValue: 'Column-3'}
]
},
{
name: 'List 2',
branchDatabase: [
{value: 'column-1', viewValue: 'Column-1'},
{value: 'column-2', viewValue: 'Column-2'},
{value: 'column-3', viewValue: 'Column-3'}
]
}
]
constructor() { }
ngOnInit(): void {  }
}

DevTools出错

core.js:14644 NG0304: 'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
logUnknownElementError @ core.js:14644
elementStartFirstCreatePass @ core.js:14495
ɵɵelementStart @ core.js:14531
ConfigurerdbmsComponent_Template @ template.html:88
executeTemplate @ core.js:9310
renderView @ core.js:9117
renderComponent @ core.js:10392
renderChildComponents @ core.js:8982
renderView @ core.js:9142
create @ core.js:24837
createComponent @ core.js:22876
activateWith @ router_outlet.ts:165
activateRoutes @ activate_routes.ts:187
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activateRoutes @ activate_routes.ts:157
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activateRoutes @ activate_routes.ts:154
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activate @ activate_routes.ts:42
(anonymous) @ activate_routes.ts:27
_next @ map.ts:84
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_complete @ takeLast.ts:108
complete @ Subscriber.ts:126
_complete @ tap.ts:145
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ takeLast.ts:68
subscribe @ Observable.ts:214
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ switchMap.ts:99
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
_next @ filter.ts:101
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_complete @ defaultIfEmpty.ts:80
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ filter.ts:71
subscribe @ Observable.ts:214
call @ take.ts:72
subscribe @ Observable.ts:214
call @ defaultIfEmpty.ts:57
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_complete @ defaultIfEmpty.ts:80
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ filter.ts:71
subscribe @ Observable.ts:214
call @ take.ts:72
subscribe @ Observable.ts:214
call @ defaultIfEmpty.ts:57
subscribe @ Observable.ts:214
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
Show 170 more frames
core.js:14644 NG0304: 'mat-label' is not a known element:
1. If 'mat-label' is an Angular component, then verify that it is part of this module.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
logUnknownElementError @ core.js:14644
elementStartFirstCreatePass @ core.js:14495
ɵɵelementStart @ core.js:14531
ConfigurerdbmsComponent_Template @ template.html:89
executeTemplate @ core.js:9310
renderView @ core.js:9117
renderComponent @ core.js:10392
renderChildComponents @ core.js:8982
renderView @ core.js:9142
create @ core.js:24837
createComponent @ core.js:22876
activateWith @ router_outlet.ts:165
activateRoutes @ activate_routes.ts:187
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activateRoutes @ activate_routes.ts:157
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activateRoutes @ activate_routes.ts:154
(anonymous) @ activate_routes.ts:133
activateChildRoutes @ activate_routes.ts:132
activate @ activate_routes.ts:42
(anonymous) @ activate_routes.ts:27
_next @ map.ts:84
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_complete @ takeLast.ts:108
complete @ Subscriber.ts:126
_complete @ tap.ts:145
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ takeLast.ts:68
subscribe @ Observable.ts:214
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ switchMap.ts:99
subscribe @ Observable.ts:214
call @ tap.ts:81
subscribe @ Observable.ts:214
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ switchMap.ts:137
_next @ switchMap.ts:126
next @ Subscriber.ts:99
_next @ filter.ts:101
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
notifyNext @ mergeMap.ts:162
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_complete @ defaultIfEmpty.ts:80
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ filter.ts:71
subscribe @ Observable.ts:214
call @ take.ts:72
subscribe @ Observable.ts:214
call @ defaultIfEmpty.ts:57
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_complete @ defaultIfEmpty.ts:80
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ Subscriber.ts:148
complete @ Subscriber.ts:126
_complete @ mergeMap.ts:156
complete @ Subscriber.ts:126
(anonymous) @ subscribeToArray.ts:11
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ filter.ts:71
subscribe @ Observable.ts:214
call @ take.ts:72
subscribe @ Observable.ts:214
call @ defaultIfEmpty.ts:57
subscribe @ Observable.ts:214
call @ mergeMap.ts:96
subscribe @ Observable.ts:214
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
_innerSub @ mergeMap.ts:144
_tryNext @ mergeMap.ts:137
_next @ mergeMap.ts:121
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
_next @ tap.ts:125
next @ Subscriber.ts:99
notifyNext @ switchMap.ts:166
_next @ innerSubscribe.ts:30
next @ Subscriber.ts:99
_next @ map.ts:89
next @ Subscriber.ts:99
(anonymous) @ subscribeToArray.ts:9
_trySubscribe @ Observable.ts:238
subscribe @ Observable.ts:219
call @ map.ts:59
subscribe @ Observable.ts:214
innerSubscribe @ innerSubscribe.ts:111
Show 170 more frames
core.js:5967 ERROR Error: Uncaught (in promise): Error: NG0201: No provider for NgControl found in NodeInjector
Error: NG0201: No provider for NgControl found in NodeInjector
at throwProviderNotFoundError (core.js:1369)
at notFoundValueOrThrow (core.js:3271)
at lookupTokenUsingModuleInjector (core.js:3306)
at getOrCreateInjectable (core.js:3408)
at Module.ɵɵdirectiveInject (core.js:14415)
at NodeInjectorFactory.NgControlStatus_Factory [as factory] (ng_control_status.ts:78)
at getNodeInjectable (core.js:3503)
at instantiateAllDirectives (core.js:9988)
at createDirectivesInstances (core.js:9337)
at ɵɵelementStart (core.js:14559)
at resolvePromise (zone.js:1250)
at resolvePromise (zone.js:1204)
at zone.js:1316
at ZoneDelegate.invokeTask (zone.js:429)
at Object.onInvokeTask (core.js:28269)
at ZoneDelegate.invokeTask (zone.js:428)
at Zone.runTask (zone.js:200)
at drainMicroTaskQueue (zone.js:615)
at ZoneTask.invokeTask [as invoke] (zone.js:515)
at invokeTask (zone.js:1651)
defaultErrorLogger @ core.js:5967
handleError @ core.js:6015
next @ core.js:28881
schedulerFn @ core.js:25646
__tryOrUnsub @ Subscriber.ts:265
next @ Subscriber.ts:207
_next @ Subscriber.ts:139
next @ Subscriber.ts:99
next @ Subject.ts:70
emit @ core.js:25636
(anonymous) @ core.js:28304
ZoneDelegate.invoke @ zone.js:395
Zone.run @ zone.js:155
runOutsideAngular @ core.js:28209
onHandleError @ core.js:28304
ZoneDelegate.handleError @ zone.js:399
Zone.runGuarded @ zone.js:169
_loop_2 @ zone.js:1108
api.microtaskDrainDone @ zone.js:1120
drainMicroTaskQueue @ zone.js:622
ZoneTask.invokeTask @ zone.js:515
invokeTask @ zone.js:1651
globalZoneAwareCallback @ zone.js:1677

您需要将mat-select和mat-form-field模块导入您的app.module.ts:

import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';

您还绑定到表单控件([formControl]="columnControl"和[formControl]="databaseControl")，但您的组件中没有表单控件。

您需要在您的selection-page.ts:

中创建表单控件
databaseControl = new FormControl();
columnControl = new FormControl();

我相信你也需要导入响应式表单模块:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

我成功地复制了您的页面与以下app.module.ts文件没有错误。我把selection-page.ts和selection-page.html完全保留在你的位置。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatCardModule} from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
CommonModule,
MatFormFieldModule,
MatSelectModule,
MatCardModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

截图工作

如果它仍然不起作用，我相信这不是mat-form-field元素导致你的页面崩溃，也许是别的什么。

app.module.ts 

import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { RouterModule } from "@angular/router";
import { ToastrModule } from 'ngx-toastr';
import { AppComponent } from "./app.component";
import { AdminLayoutComponent } from "./layouts/admin-layout/admin-layout.component";
import { AuthLayoutComponent } from './layouts/auth-layout/auth-layout.component';
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { AppRoutingModule } from "./app-routing.module";
import { ComponentsModule } from "./components/components.module";
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatCardModule } from '@angular/material/card';
import { SelectionPageComponent } from './pages/ingestions/rdbms/pages/selection-page/selection-page.component';
import {MatNativeDateModule} from '@angular/material/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {DemoMaterialModule} from './material-module';
import {MAT_FORM_FIELD_DEFAULT_OPTIONS} from '@angular/material/form-field';

import {MatSelectModule} from '@angular/material/select';
@NgModule({
imports: [
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
ComponentsModule,
NgbModule,
RouterModule,
AppRoutingModule,
ToastrModule.forRoot(),
MatNativeDateModule,
BrowserModule,
DemoMaterialModule,
MatSelectModule

],
exports: [
DragDropModule,
MatCardModule
],
declarations: [AppComponent, AdminLayoutComponent, AuthLayoutComponent, SelectionPageComponent],
bootstrap: [AppComponent],
providers: [
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'fill' } },

]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));

import { Component, OnInit } from '@angular/core';
import {FormControl} from '@angular/forms';

selection-page.ts

@Component({
selector: 'app-selection-page',
templateUrl: './selection-page.component.html',
styleUrls: ['./selection-page.component.scss']
})
export class SelectionPageComponent implements OnInit {
databaseControl= new FormControl();
constructor() { }
ngOnInit(): void {  }
}

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium