Question

我的问题类似于这个问题：How to pass 2 parameters to EventEmitter angular 2

我已经阅读了问题和答案，并且听了似乎对我的案例有效的答案，但它在我的案例中没有用。

我需要将2个参数从2个不同的输入传递给EventEmitter。这两个参数将被添加到其他组件中的数组中，并显示在列表中，以显示成分标题及其数量。

我无法弄清楚这里的问题是什么。

这是event.ts，其中EventEmitter是：

这是我从中获取2个参数的html组件：

让我试着解释一下我的整个过程是否有助于你理解并帮助我。

首先我从“shoppingListButtons.component.html”＆＃39; shoppingListButtons.component.html＆＃39;

   <div class="container">
<form>
    <div class="form-group col-lg-4 col-md-3">
        <label for="recipeName">{{inputTName}}</label>
        <input type="text" class="form-control" id="recipeName" [(ngModel)]="ingredientTitle" name="title">
    </div>

    <div class="form-group col-lg-2 col-md-3">
        <label for="recipeAmount">{{inputTAmount}}</label>
        <input type="text" class="form-control" id="recipeAmount" [(ngModel)]="ingredientAmount" name="amount">
    </div>

</form>
</div>

<div>
     <button class="btn btn-success" (click)="AddToShoppingList()">{{btnToAdd}}</button>
    <button class="btn btn-danger">{{btnDel}}</button>
    <button class="btn btn-primary" (click)="clear()">{{btnClr}}</button>
</div>

然后，这两个输入：＆＃39; ingredientTitle＆＃39;和＆＃39; ingredientAmount＆＃39;应该传递给＆＃39; shoppingListButtons.component.ts＆＃39;

中的EventEmitter

import { Component, Input, Output, EventEmitter } from '@angular/core'

@Component({
    selector: 'shoppingListButtons',
    templateUrl: './shoppingListButtons.component.html'

    })
    export class ShoppingListButtonComponent {
    @Input() buttonVar: string;
    @Input() buttonNew: string;

    @Input() inputTName: string;
    @Input() inputTAmount: number;
    @Input() btnToAdd: string;
    @Input() btnDel: string;
    @Input() btnClr: string;

    @Input() ingredientTitle: string;
    @Input() ingredientAmount: string;

    @Output() shoppingListChanged: EventEmitter<any> = new EventEmitter();

    AddToShoppingList() {
        this.shoppingListChanged.emit(this.ingredientTitle);
    }
}

之后，发射器应该将参数传递给方法：＆＃39; AddIngredients＆＃39;这是在shoppingList.component.ts＆＃39;

中

export class ShoppingListComponent {

 constructor(private _shoppingListService: ShoppingListService) { }

 ingredientsList = this._shoppingListService.ingredientsShoppingList;

 listTitle: string;
 listAmount: number;

 AddIngredients(listTitle, listAmount) {
   this._shoppingListService.AddIngredients(listTitle, listAmount)
 }

该方法是一个单独的服务，它包含一个数组，我希望在不同的html组件中使用ngFor显示它。

数组：

@Injectable()
export class ShoppingListService {

ingredientsShoppingList: ShoppingListItem[] = [
{Title:"Milk", Amount:3},
{Title:"Cream", Amount: 2}, 
{Title: "Peaches", Amount: 5}]


AddIngredients(listTitle: string, listAmount: number){
  this.ingredientsShoppingList.push({Title: listTitle, Amount: listAmount})
}

GetIngredients(){
    return this.ingredientsShoppingList;
}

}

我如何在shoppingList.component.html中显示我的列表：

<div class="container">
<h2>Shopping List</h2>
<shoppingListButtons (shoppingListChanged)="AddIngredients($event)" [inputTName]="inputTitleName" [inputTAmount]="inputTitleAmount"
  [btnToAdd]="btnAdd" [btnDel]="btnDelete" [btnClr]="btnClear"></shoppingListButtons>

angular 2 - 将2个参数传递给EventEmitter

0 个答案: