错误TypeError：jit_nodeValue_11（...）不是Object.eval上的函数[作为handleEvent]（HomeComponent.html：77）

Question

我正在使用Anugular 7和角形材料。尝试通过

提交表单时，我目前遇到错误

（ngsubmit）=“ changePassword（formData）”

页面上的其他ngSubmits正常工作，提交时没有问题。只是想知道是否有人遇到过这个问题/知道解决方法。

home.component.html（代码段）

<ng-template #changePassword let-c="close" let-d="dismiss">
    <div class="modal-header">
        <h4 class="modal-title">Change Password</h4>
        <button type="button" class="close" (click)="d('Cross Click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div *ngIf="msg" role="alert" class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <mat-icon>done</mat-icon>
            <span class="sr-only">Error:</span>
            {{modalMsg}}
        </div>
        <form novalidate (ngSubmit)="changePassword(changePasswordFrm)" [formGroup]="changePasswordFrm">
            <div class="form-group">
                <div>
                    <span>Email Address*</span>
                    <input type="text" class="form-control" value="{{emailAddress}}" readonly formControlName="EmailAddress" />
                </div>
                <div>
                    <span>Old Password*</span>
                    <input type="password" class="form-control" value="{{password}}" readonly formControlName="OldPassword" />
                </div>
                <div>
                    <span>New Password*</span>
                    <input type="password" class="form-control" placeholder="New Password" formControlName="NewPassword" />
                </div>
                <div>
                    <span>Confirm Password*</span>
                    <input type="password" class="form-control" placeholder="Confirm Password" formControlName="ConfirmPassword" />
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" [disabled]="changePasswordFrm.invalid" class="btn btn-primary">Change Password</button>
                <button type="button" class="btn btn-outline-dark" (click)="c('Save click')">Cancel</button>
            </div>
        </form>
    </div>
</ng-template>

home.component.ts

createChangePasswordFrm() {
        this.changePasswordFrm = this.fb.group({
            EmailAddress: "",
            OldPassword: "",
            NewPassword: ["", Validators.required],
            ConfirmPassword: ["", Validators.required]
        });
    }

changePassword(formData: any): void {
    this.loginService.changeUserPassword(formData).subscribe(
        data => {
            if (data.Successful) {
                this.msg = data.Information;
                this.createLoginFrm();
                this.activeModal.close();
                this.isLoading = false;
            }
            else {
                this.modalMsg = data.Information;
            }
        },
        error => this.modalMsg = error);
}

app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule, APP_BASE_HREF } from "@angular/common";
import { MatFormFieldModule, MatSelectModule, MatDialogModule, MatTableModule } from "@angular/material";
import { MatIconModule} from "@angular/material/icon";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";

import { appRoutingModule } from "./app.routing";

import { AppComponent } from "./app.component";
import { HomeComponent } from "./component/home/home.component";
import { UsersComponent } from "./component/users/users.component";

import { AuthService } from "./service/auth.service";
import { LoginService } from "./service/login.service";
import { UserService } from "./service/user.service";
import { ResourceService } from "./service/resource.service";


@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        UsersComponent
    ],
    imports: [
        BrowserModule,
        MatIconModule,
        MatFormFieldModule,
        MatSelectModule,
        MatDialogModule,
        MatTableModule,
        ReactiveFormsModule,
        FormsModule,
        CommonModule,
        BrowserAnimationsModule,
        HttpClientModule,
        NgbModule.forRoot(),
        appRoutingModule
    ],
    providers: [{ provide: APP_BASE_HREF, useValue: '/' }, AuthService, LoginService, UserService, ResourceService],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

对于那些遇到此问题的人来说。正常的原因是您的ng-template可能与方法调用共享一个名称。

从上方可以看到ng模板称为#changePassword。在提交时，它称为“方法” changePassword（）。这使angular对于应该调用方法还是ng-template感到困惑。

更改方法名称解决了该问题。