Question

我正在使用角度2与开发电子商务应用。

我尝试使用Event Emitter，因为我将任何产品添加到购物车中并在购物车图标中显示计数值。

这是我的主页组件。

import { Component, OnInit,EventEmitter,Output } from '@angular/core';
export class HomeComponent implements OnInit {
  badge;
  @Output() change: EventEmitter<any> = new EventEmitter();

     addtocart(deal, value) {
      this.badge=1;
      this.change.emit(this.badge);
     }
}

当我点击addtocart按钮时，我会发出badge值。

这是我的菜单栏组件.ts

  import { Component, OnInit,Input } from '@angular/core';
export class MenubarComponent implements OnInit {
 badge:any;
 change1(user)
    {
      this.badge=user;
      console.log("called",this.badge);
    }

}

这是我的menubar.html

<span (change)="change1($event)">{{badge}}</span>

这是home component.html。

<div class="col-sm-4 col-md-3" *ngFor="let deals of deals; let i = index;">
                        <div class=" deals-blk" *ngIf="i < 4">                                
                            <a href="deals-details.html"><img src="http://35.154.116.133/crackerdeals/deals/{{deals.D_IMAGES[0].URL}}" alt="DEALs"></a>

                            <div class="deals-blk-details clearfix">              
                                <h3>{{deals.D_NAME}}</h3>
                                <p class="short-desc">For duration of 2hours and budget of 3K</p>
                                <p class="net-val">Net Value: {{settings.DEFAULT_CURRENCY_SYMBOL}} {{deals.D_SALE_PRICE}}</p>
                                <p class="prod-val">{{settings.DEFAULT_CURRENCY_SYMBOL}} {{deals.D_REGULAR_PRICE}} + {{deals.D_TAX[0].PERCENTAGE}}% GST</p>
                                <div class="row clearfix">
                                    <div class="col-sm-3 selectbox">    
                                        <select  name="" id="" #sval>
                                            <option *ngFor="let select of selectval" value="{{select.value}}" [selected]="select.value === '1'">{{select.value}}</option>
                                        </select>
                                    </div>

                                    <div class="col-sm-9">                       
                                        <button class="col-sm-8" (click)="addtocart(deals,sval.value)">ADD TO CART</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

实际上我正在使用ngfor显示产品列表。

sval.value is count value.`deals` is a product.

但是不显示badge值我该怎么做？

请建议我，

由于

Answer 1

import { Component, OnInit,EventEmitter,Output } from '@angular/core';
export class HomeComponent implements OnInit {
  badge : number = null;
  @Output() badgetChanged = new EventEmitter();
     addtocart(deal, value) {
      this.badge = 1;
      this.badgetChanged.emit(this.badge);
     }
}

HTML：

<span (badgetChanged)="badgetChanged($event)">{{badge}}</span>

其他TS：

badgetChanged(event : number) : void {
  this.badge = event;
}

具有eventemiiter的角度2不起作用

1 个答案: