Javascript 未捕获引用错误：函数未使用onclick定义，onclick具有角度形式和js_Javascript_Jquery_Html_Angularjs

Javascript 未捕获引用错误：函数未使用onclick定义，onclick具有角度形式和js

javascript jquery html angularjs

Javascript 未捕获引用错误：函数未使用onclick定义，onclick具有角度形式和js,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我尝试了几种不同的方法来解决这个问题，但没有成功：将脚本放在同一html页面上添加了事件侦听器移动脚本内体函数调整使用开发工具，看起来我在html文件中使用了onclick函数，但没有使用js文件组件html文件 <body> <form (ngSubmit)="onSubmit(f)" #f="ngForm"> <div class="row"> <div class="col-lg-12 form-gr

我尝试了几种不同的方法来解决这个问题，但没有成功：

将脚本放在同一html页面上

添加了事件侦听器

移动脚本内体函数

调整

使用开发工具，看起来我在html文件中使用了onclick函数，但没有使用js文件

组件html文件

    <body>
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
    <div class="row">
      <div class="col-lg-12 form-group">
      <label for="email">Email</label>
      <input
        type="email"
        id="email"
        class="form-control"
        name="email"
        ngModel
        required
        [pattern]="'^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$'"
        >
    </div>
      <div class="row moveRight">
        <div class="col-lg-12 form-group">
      <label for="firstname">First Name</label>
      <input
        type="text"
        id="firstname"
        class="form-control"
        name="firstname"
        ngModel
        required
        >
      </div>
      </div>
      <div class="row moveRight">
        <div class="col-lg-12 form-group">
          <label for="lastname">Last Name</label>
          <input
            type="text"
            id="lastname"
            class="form-control"
            name="lastname"
            ngModel
            required
            >
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <button class="btn btn-success" id="startnode" type="submit" [disabled]="!f.valid" onclick="submitform()">Submit</button>
        </div>
      </div>
    </div>
  </form>
  <script type="text/javascript" src="form.js">
  </script>
</body>

在Angular中，我们通常将数据访问代码放在服务中。以下是一个例子：

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/map';

import { IProduct } from './product';

@Injectable()
export class ProductService {
    private baseUrl = 'api/products';

    constructor(private http: Http) { }

    saveProduct(product: IProduct): Observable<IProduct> {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        const url = `${this.baseUrl}/${product.id}`;
        return this.http.put(url, product, options)
            .map(() => product)
            .do(data => console.log('updateProduct: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    private handleError(error: Response): Observable<any> {
        // in a real world app, we may send the server to some remote logging infrastructure
        // instead of just logging it to the console
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response，Headers，RequestOptions}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/do'；
导入“rxjs/add/operator/catch”；
导入“rxjs/add/observable/throw”；
导入'rxjs/add/operator/map'；
从“./product”导入{IPProduct}；
@可注射（）
出口类产品服务{
私有baseUrl=‘api/产品’；
构造函数（私有http:http）{}
saveProduct（产品：IPProduct）：可观察{
let headers=新的头（{'Content-Type'：'application/json'}）；
let options=newrequestoptions（{headers:headers}）；
常量url=`${this.baseUrl}/${product.id}`；
返回this.http.put（url、产品、选项）
.map（（）=>产品）
.do（数据=>console.log（'updateProduct:'+JSON.stringify（数据）））
.接住（这个.把手错误）；
}
私有句柄错误（错误：响应）：可观察{
//在现实世界的应用程序中，我们可能会将服务器发送到某些远程日志记录基础设施
//而不仅仅是将其记录到控制台
控制台错误（error）；
返回Observable.throw（error.json（）.error | |'Server error'）；
}
}

然后组件调用此服务以保存数据：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './app/products/product-edit.component.html',
    styleUrls: ['./app/products/product-edit.component.css']
})
export class ProductEditComponent implements OnInit {
    pageTitle: string = 'Product Edit';
    errorMessage: string;
    product: IProduct;

    constructor(private router: Router,
        private productService: ProductService) { }

    saveProduct(): void {
        if (this.isValid(null)) {
            this.productService.saveProduct(this.product)
                .subscribe(
                    () => this.onSaveComplete(`${this.product.productName} was saved`),
                    (error: any) => this.errorMessage = <any>error
                );
        } else {
            this.errorMessage = 'Please correct the validation errors.';
        }
    }

    onSaveComplete(message?: string): void {
        // Navigate back to the product list
        this.router.navigate(['/products']);
    }

}

从'@angular/core'导入{Component，OnInit}；
从'@angular/Router'导入{Router}；
从“./product”导入{IPProduct}；
从“./product.service”导入{ProductService}；
@组成部分({
templateUrl:'./app/products/product edit.component.html'，
样式URL:['./app/products/product edit.component.css']
})
导出类ProductEditComponent实现OnInit{
pageTitle:string='产品编辑'；
错误消息：字符串；
产品：IPProduct；
构造函数（专用路由器：路由器、，
私有产品服务：产品服务）{}
saveProduct（）：void{
if（this.isValid（null））{
this.productService.saveProduct（this.product）
.订阅(
（）=>this.onSaveComplete（`${this.product.productName}已保存`），
（error:any）=>this.errorMessage=错误
);
}否则{
this.errorMessage='请更正验证错误'；
}
}
onSaveComplete（消息？：字符串）：无效{
//导航回产品列表
this.router.navigate（['/products']）；
}
}

您在

文档中包含了submitform
函数。ready

，在全局中无法访问它。@Teemu我收到了相同的错误

$（文档）。ready（函数（）{}）；“”在顶部，然后

函数submitform（）{…```当您有一个内联侦听器调用一个函数时，被调用的函数必须是全局函数，即从

文档中拉出函数定义。就绪

。TypeScript和Angular组件是您的一个选项吗？@deborahK我可以制作一个新组件，但Angular/TypeScript还是一个新手，因此不确定如何翻译js代码

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './app/products/product-edit.component.html',
    styleUrls: ['./app/products/product-edit.component.css']
})
export class ProductEditComponent implements OnInit {
    pageTitle: string = 'Product Edit';
    errorMessage: string;
    product: IProduct;

    constructor(private router: Router,
        private productService: ProductService) { }

    saveProduct(): void {
        if (this.isValid(null)) {
            this.productService.saveProduct(this.product)
                .subscribe(
                    () => this.onSaveComplete(`${this.product.productName} was saved`),
                    (error: any) => this.errorMessage = <any>error
                );
        } else {
            this.errorMessage = 'Please correct the validation errors.';
        }
    }

    onSaveComplete(message?: string): void {
        // Navigate back to the product list
        this.router.navigate(['/products']);
    }

}