Question

我正在使用ASP.NET Core 2.0和Visual Studio 2017 Angular的Web应用程序模板开发Angular 2应用程序。

我不知道为什么事件会被触发两次。

这是law.component.html：

<p *ngIf="!laws"><em>Loading...</em></p>
Legislaciones:&nbsp;
<select #l (change)="lawChanges(l.value)">
    <option></option>
    <option *ngFor="let law of laws" [ngValue]="law">{{law.name}}</option>
</select>

这是law.component.ts：

import { Component, Inject, Output, EventEmitter } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';

@Component({
    selector: 'law',
    templateUrl: './law.component.html'
})

export class LawComponent {
    public laws: Law[];

    @Output()
    change: EventEmitter<number> = new EventEmitter<number>();

    constructor(private http: Http,
        @Inject('BASE_URL') private baseUrl: string) {

        http.get(baseUrl + 'api/Law').subscribe(result => {
            this.laws = result.json() as Law[];
        }, error => console.error(error));
    }

    lawChanges(selectedLaw: Law) {
        console.log("selected law: " + selectedLaw.value + " " + selectedLaw.name + ".");
        this.change.emit(selectedLaw.value);
    }
}

interface Law {
    value: number;
    name: string;
}

我添加的内容包括law.component.html中的product.component.html：

<law (change)="lawChanged($event)"></law>

这是product.component.ts：

import { Component, Inject, ChangeDetectorRef } from '@angular/core';
import { Http, RequestOptions, Headers } from '@angular/http';

@Component({
    selector: 'product',
    templateUrl: './product.component.html'
})
export class ProductComponent {
    public products: Product[];
    private law: number;

    constructor(private http: Http,
        @Inject('BASE_URL') private baseUrl: string,
        private changeDetectorRef: ChangeDetectorRef) {
    }

    lawChanged(law: number) {
        console.log("lawchange: " + law);

        this.law = law;
        this.http.get(this.baseUrl + 'api/Product/'+ law).subscribe(result => {
            this.products = result.json() as Product[];
        }, error => console.error(error));
    }
}

interface Product {
    productCode: string;
    description: string;
    law: number;
    name: string;
    comment: string;
}

这是angular的版本（ng --version）：

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.4
node: 6.11.3
os: win32 x64

我在控制台中得到了这个：

selected law: 1  law.component.ts:25:2
lawchange: 1  product.component.ts:21:2
lawchange: [object Event]  product.component.ts:21:2

这在节点输出上（我认为是节点。它是运行服务器的控制台）：

info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:50356/api/Product/1
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 GET http://localhost:50356/api/Product/%5Bobject%20Event%5D

我做错了什么？

更新
如果我将law.component.html代码更改为此代码（删除#l (change)="lawChanges(l.value)"以及[ngValue]="law"）：

<select>
    <option></option>
    <option *ngFor="let law of laws" [value]="law.value">{{law.name}}</option>
</select>

我如何将law component整合到product component：

中

<law (change)="lawChanged($event.target.value)"></law>

现在它运行得很好。我不知道这是否是正确的方法。

删除eventemitter以避免代码运行两次

0 个答案: