Angular Can'；ng模板上没有事件？事件绑定单击不是由嵌入模板上的任何指令发出的_Angular_Angular Ng If

Angular Can'；ng模板上没有事件？事件绑定单击不是由嵌入模板上的任何指令发出的

angular

Angular Can'；ng模板上没有事件？事件绑定单击不是由嵌入模板上的任何指令发出的,angular,angular-ng-if,Angular,Angular Ng If,我试图简单地使用*ngIf；否则，渲染按钮或不渲染按钮，但仍会出现此错误。似乎我的ng模板上不能有事件？这不可能。我一定是做错了什么事件名称（单击）显然拼写正确，据我所知，我需要的所有指令浏览器和通用模块都导入并列在NgModule元数据中错误：事件绑定单击不是由嵌入式系统上的任何指令发出的模板。确保事件名称拼写正确，并且所有指令列在“@NgModule.declarations”中这是我为这个问题找到的唯一真正的解决方案：但是我已经将BrowserModule和CommonMod

我试图简单地使用*ngIf；否则，渲染按钮或不渲染按钮，但仍会出现此错误。似乎我的ng模板上不能有事件？这不可能。我一定是做错了什么

事件名称（单击）显然拼写正确，据我所知，我需要的所有指令浏览器和通用模块都导入并列在NgModule元数据中

错误：

事件绑定单击不是由嵌入式系统上的任何指令发出的模板。确保事件名称拼写正确，并且所有指令列在“@NgModule.declarations”中

这是我为这个问题找到的唯一真正的解决方案：但是我已经将BrowserModule和CommonModule都导入到AppModule和最接近错误发生位置的模块中

非常接近仅使用两个*NGIF（仅供参考）。。。为什么我的ng模板上不能有一个事件？我已将changeViewState（）替换为属性，并将（单击）事件更改为（激活）和（鼠标悬停）事件。。。它似乎不像ng模板上的任何（事件）

我将问题代码复制粘贴到我的应用程序周围，每次都会出现错误

“问题代码”：

<div *ngIf="(this.stateUserReqValid === 'userInfo' || this.stateUserReqValid === 'orgInfo' || this.stateUserReqValid === 'supInfo' || this.stateUserReqValid === 'secInfo'); else ele"
  class="userManHover" (click)="changeViewState('userInfo');" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
  <h4 class="font-weight-light">
    <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='userInfo'}">1 </span> User Information &nbsp;
    <span class="icon-accept user-man-accept"></span>
  </h4>
</div>
<ng-template #ele class="userManHover" (click)="changeViewState('userInfo')" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
  <h4 class="font-weight-light">
    <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='userInfo'}">1 </span> User Information &nbsp;
    <span class="icon-accept user-man-accept"></span>
  </h4>
</ng-template>

用户管理模块

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';

import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
// import 'rxjs/add/operator/map';
import { NgModule, Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GridAllModule } from '@syncfusion/ej2-ng-grids';
import { HttpClientModule } from '@angular/common/http';


import {
  GridModule, ToolbarService, EditService, SortService, GroupService, FilterService, PageService,
  ContextMenuItem, PdfExportService, ExcelExportService, ContextMenuService, ResizeService,
  DataSourceChangedEventArgs, DataStateChangeEventArgs
} from '@syncfusion/ej2-ng-grids';


import { UserManagementComponent } from './user-management.component';
import { PageHeaderModule } from './../../shared';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


// import { NewUserComponent } from './new-user/new-user.component';
// import { PendingUserComponent } from './pending-user/pending-user.component';
// import { ProcessUserComponent } from './process-user/process-user.component';
// import { NewUserReqComponent } from './new-user/new-user-req/new-user-req.component';

import { RouterModule } from '@angular/router';
import { NewUserOrgInfoComponent } from './new-user/new-user-org-info/new-user-org-info.component';
import { NewUserSupervisorInfoComponent } from './new-user/new-user-supervisor-info/new-user-supervisor-info.component';
import { NewUserSecurityInfoComponent } from './new-user/new-user-security-info/new-user-security-info.component'; //??????????
import { NewUserComponent } from './new-user/new-user.component';
import { PendingUserComponent } from './pending-user/pending-user.component';
import { ProcessUserComponent } from './process-user/process-user.component';
import { NewUserReqComponent } from './new-user/new-user-req/new-user-req.component';
import { UserManagementBladeComponent } from './user-management-blade/user-management-blade.component';
import { UserReqValidStateService } from '../../shared/services/UserManagement/UserReqValidState.service';



@NgModule({
  imports: [
    CommonModule,
    PageHeaderModule,
    GridModule,
    RouterModule,
    NgbModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    BrowserModule,
    CommonModule
  ],
  declarations: [UserManagementComponent, NewUserComponent, ProcessUserComponent, PendingUserComponent, NewUserReqComponent, NewUserOrgInfoComponent, NewUserSupervisorInfoComponent, NewUserSecurityInfoComponent, UserManagementBladeComponent],
  providers: [EditService, ToolbarService, SortService, GroupService, FilterService, PageService,
    ContextMenuService, PageService, ResizeService, PdfExportService, ExcelExportService, UserReqValidStateService]
})
export class UserManagementModule {
}

import { PageHeaderModule } from './shared/components/page-header/page-header.module';

import { environment } from './../environments/environment';

// Support imports
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// import services
import { WebApiService } from './shared/services/webapi/web-api.service';
import { UserService } from './shared/services/UserManagement/User.service';
import { LogService } from "./shared/services/logging/log.service";
import { LogPublishersService } from "./shared/services/logging/publishers/LogPublishers.service";

// Security
import { GWIAuthService } from "./shared/services/authService/gwiAuth.service";

// Import Components
import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { LandingComponent } from './landing/landing.component';

// Import feature modules
import { LayoutModule } from './layout/layout.module';

// Routing Module
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UserManViewStateService } from './shared/services/UserManagement/UserManViewState.service';
import { Guardian } from './shared/services/authService/guardian';
import { UserReqViewStateService } from './shared/services/UserManagement/UserReqViewState.service';
import { UserReqValidStateService } from './shared/services/UserManagement/UserReqValidState.service';




@NgModule({
  declarations: [AppComponent, NotFoundComponent, LandingComponent],
  imports: [
    CommonModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    BrowserAnimationsModule,
    HttpClientModule,
    NgbModule.forRoot(),
    LayoutModule,
    ReactiveFormsModule,
    FormsModule,
    AppRoutingModule,
    PageHeaderModule
  ],
  providers: [
    UserService,
    LogService,
    LogPublishersService,
    WebApiService,
    GWIAuthService,
    UserManViewStateService,
    UserReqViewStateService,
    UserReqValidStateService,
    Guardian
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';

import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
// import 'rxjs/add/operator/map';
import { NgModule, Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GridAllModule } from '@syncfusion/ej2-ng-grids';
import { HttpClientModule } from '@angular/common/http';


import {
  GridModule, ToolbarService, EditService, SortService, GroupService, FilterService, PageService,
  ContextMenuItem, PdfExportService, ExcelExportService, ContextMenuService, ResizeService,
  DataSourceChangedEventArgs, DataStateChangeEventArgs
} from '@syncfusion/ej2-ng-grids';


import { UserManagementComponent } from './user-management.component';
import { PageHeaderModule } from './../../shared';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


// import { NewUserComponent } from './new-user/new-user.component';
// import { PendingUserComponent } from './pending-user/pending-user.component';
// import { ProcessUserComponent } from './process-user/process-user.component';
// import { NewUserReqComponent } from './new-user/new-user-req/new-user-req.component';

import { RouterModule } from '@angular/router';
import { NewUserOrgInfoComponent } from './new-user/new-user-org-info/new-user-org-info.component';
import { NewUserSupervisorInfoComponent } from './new-user/new-user-supervisor-info/new-user-supervisor-info.component';
import { NewUserSecurityInfoComponent } from './new-user/new-user-security-info/new-user-security-info.component'; //??????????
import { NewUserComponent } from './new-user/new-user.component';
import { PendingUserComponent } from './pending-user/pending-user.component';
import { ProcessUserComponent } from './process-user/process-user.component';
import { NewUserReqComponent } from './new-user/new-user-req/new-user-req.component';
import { UserManagementBladeComponent } from './user-management-blade/user-management-blade.component';
import { UserReqValidStateService } from '../../shared/services/UserManagement/UserReqValidState.service';



@NgModule({
  imports: [
    CommonModule,
    PageHeaderModule,
    GridModule,
    RouterModule,
    NgbModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    BrowserModule,
    CommonModule
  ],
  declarations: [UserManagementComponent, NewUserComponent, ProcessUserComponent, PendingUserComponent, NewUserReqComponent, NewUserOrgInfoComponent, NewUserSupervisorInfoComponent, NewUserSecurityInfoComponent, UserManagementBladeComponent],
  providers: [EditService, ToolbarService, SortService, GroupService, FilterService, PageService,
    ContextMenuService, PageService, ResizeService, PdfExportService, ExcelExportService, UserReqValidStateService]
})
export class UserManagementModule {
}

import { PageHeaderModule } from './shared/components/page-header/page-header.module';

import { environment } from './../environments/environment';

// Support imports
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// import services
import { WebApiService } from './shared/services/webapi/web-api.service';
import { UserService } from './shared/services/UserManagement/User.service';
import { LogService } from "./shared/services/logging/log.service";
import { LogPublishersService } from "./shared/services/logging/publishers/LogPublishers.service";

// Security
import { GWIAuthService } from "./shared/services/authService/gwiAuth.service";

// Import Components
import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { LandingComponent } from './landing/landing.component';

// Import feature modules
import { LayoutModule } from './layout/layout.module';

// Routing Module
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UserManViewStateService } from './shared/services/UserManagement/UserManViewState.service';
import { Guardian } from './shared/services/authService/guardian';
import { UserReqViewStateService } from './shared/services/UserManagement/UserReqViewState.service';
import { UserReqValidStateService } from './shared/services/UserManagement/UserReqValidState.service';




@NgModule({
  declarations: [AppComponent, NotFoundComponent, LandingComponent],
  imports: [
    CommonModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    BrowserAnimationsModule,
    HttpClientModule,
    NgbModule.forRoot(),
    LayoutModule,
    ReactiveFormsModule,
    FormsModule,
    AppRoutingModule,
    PageHeaderModule
  ],
  providers: [
    UserService,
    LogService,
    LogPublishersService,
    WebApiService,
    GWIAuthService,
    UserManViewStateService,
    UserReqViewStateService,
    UserReqValidStateService,
    Guardian
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

您可以将事件绑定到包装容器（e.x.HTML标记）

...

为什么不在h4标记中添加（单击）事件？这在我的应用程序中不起作用。我不断得到“无法读取未定义的属性'add'。然后我做了一个plunker，它不太管用抱歉，这是我的错误，包装容器需要在ng模板中，我更新为，以供任何想知道。。。。我在应用程序中遇到的错误“无法读取未定义的属性'add'”，实际上是针对ng模板上的[ngClass]。我刚才也把它移到了h4上。如果你对深度知识感兴趣，你可以检查你是否试图为ng容器放置事件，它不起作用。点击我