我可以在本地运行。仅在生产构建中获取错误。
我用过
import { CommonModule } from '@angular/common';
imports: [ CommonModule ]
完整错误如下所示。
client:101 Template parse errors:enter code here`Can't bind to 'ngIf' since it isn't a known property of 'div'.
("move" class="transport-remove">Remove</a></div>
<div id="carTypeDiv_1" class="veh-inv-out" [ERROR ->]*ngIf="vehicleData.vesselType == 'road'">
<ul id="carTypeList_1" class="veh-slides">
"): VehicleDirective@10:52
Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("t:" (click)="removeField($event)" title="Remove" class="transport-remove">Remove</a></div>
[ERROR ->]<div id="carTypeDiv_1" class="veh-inv-out" *ngIf="vehicleData.vesselType == 'road'">
<ul "): VehicleDirective@10:9
Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("l)]="vehicleData.makeSelect" (change)="appendModel($event.target.value)">
<option [ERROR ->]*ngFor="let make of vehicle.makes">{{make}}</option>
</select>
</div>
"): VehicleDirective@28:26
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[(ngModel)]="vehicleData.makeSelect" (change)="appendModel($event.target.value)">
[ERROR ->]<option *ngFor="let make of vehicle.makes">{{make}}</option>
</select>
</d"): VehicleDirective@28:18
Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("t" id="modelSelect" [(ngModel)]="vehicleData.modelSelect" class="prefixbox">
<option [ERROR ->]*ngFor="let model of vehicle.models">{{model}}</option>
</select></div>
<br c"): VehicleDirective@36:23
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("delSelect" id="modelSelect" [(ngModel)]="vehicleData.modelSelect" class="prefixbox">
[ERROR ->]<option *ngFor="let model of vehicle.models">{{model}}</option>
</select></div>
"): VehicleDirective@36:15
Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("refixbox">
<option value="">SELECT</option>
<option [ERROR ->]*ngFor="let year of vehicle.years">{{year}}</option>
</select>
"): VehicleDirective@47:32
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("class="prefixbox">
<option value="">SELECT</option>
[ERROR ->]<option *ngFor="let year of vehicle.years">{{year}}</option>
</select>
"): VehicleDirective@47:24
Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("ateSelect" [(ngModel)]="vehicleData.stateSelect" class="prefixbox">
<option [ERROR ->]*ngFor="let state of vehicle.regStates">{{state}}</option>
</select>
"): VehicleDirective@55:32
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("" id="stateSelect" [(ngModel)]="vehicleData.stateSelect" class="prefixbox">
[ERROR ->]<option *ngFor="let state of vehicle.regStates">{{state}}</option>
</select>
"): VehicleDirective@55:24
Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("lorSelect" [(ngModel)]="vehicleData.colorSelect" class="prefixbox">
<option [ERROR ->]*ngFor="let color of vehicle.colors">{{color}}</option>
</select>
"): VehicleDirective@68:32
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("" id="colorSelect" [(ngModel)]="vehicleData.colorSelect" class="prefixbox">
[ERROR ->]<option *ngFor="let color of vehicle.colors">{{color}}</option>
</select>
"): VehicleDirective@68:24
是什么原因。我已经验证了很多解决方案找不到灵魂。相同的代码与本地工作正常。
答案 0 :(得分:12)
添加浏览器模块后,工作正常。
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [BrowserModule ]
})
答案 1 :(得分:10)
我有完全相同的错误,并且同时包含了CommonModule和BrowserModule,但在浏览器中仍然看到相同的错误消息。
最后,我发现问题的原因是我忘记将组件添加到app.module.ts中,以防其他人正在处理相同的行为。
答案 2 :(得分:5)
如果您的组件未包含在模块的declarations
部分中,也会发生此错误:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; // <-- required
import { InventoryRoutingModule } from './inventory-routing.module';
import { InventoryComponent } from './pages/inventory/inventory.component';
@NgModule({
declarations: [InventoryComponent], // <-- In my case, this was missing
imports: [CommonModule, InventoryRoutingModule]
})
export class InventoryModule {}
答案 3 :(得分:4)
您应该在根组件或相关组件中添加CommonModule,
php artisan vendor:publish --provider="Spatie\CookieConsent\CookieConsentServiceProvider" --tag="lang"
此外,将import { CommonModule } from "@angular/common";
添加到@NgModule的CommonModule
属性,并将您的组件添加到imports
属性。
declarations
答案 4 :(得分:4)
如果上述方法均无效,则其他解决方案只是重启您的ng serve
,这对我有用。或者也许先尝试这种方法再拔出头发。
答案 5 :(得分:0)
就我而言,我在 app.module.ts 中已经有一个同名的组件,这导致我的新组件没有被正确解析并导致“无法绑定到 'ngIf'”,基本上相同的问题如上所述,缺少 app.module.ts 中的声明
解决方案:
现有组件:
import { DialogComponent } from './common/button-popup/dialog/dialog.component';
我必须为新组件添加别名
import { DialogComponent } from './common/button-popup/dialog/dialog.component';
import { DialogComponent as DialogGenericComponent } from './common/dialog/dialog.component';