单击“不在组件内触发的事件”

Question

Hello在我的HTML中有一个列表，在每个列表项中我都有以下组件：

<expandable [expandHeight]="itemExpandHeight" [expanded]="invoice.expanded">
            <p item-content class="text-white" margin-top>Sold By: {{ invoice.vendor_name }}</p>
            <p item-content class="text-white">Type: {{ invoice.kind }}</p>
            <button (click)="displayInvoiceModal(invoice);" ion-button color="light" outline>View Tickets Sold</button>
</expandable>

现在我试图让函数displayInvoiceModal()在单击按钮时起作用，但它不起作用。没有错误，它只是没有回应。

这是组件的代码：

import { Component, Input, ViewChild, ElementRef, Renderer } from '@angular/core';

@Component({
  selector: 'expandable',
  templateUrl: 'expandable.html'
})
export class ExpandableComponent {

  @ViewChild('expandWrapper', { read: ElementRef }) expandWrapper;
  @Input('expanded') expanded;
  @Input('expandHeight') expandHeight;

  constructor(public renderer: Renderer) { }

  ngAfterViewInit() {
    this.renderer.setElementStyle(this.expandWrapper.nativeElement, 'height', this.expandHeight + 'px');
  }

}

这是我的页面（sales.ts）：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import Echo from "laravel-echo";
import { SalesProvider } from '../../providers/sales/sales';
import { ToastController, ModalController } from 'ionic-angular';
import { Invoice } from '../../interfaces/invoice';

declare global {
    interface Window { Echo: any; }
}

/**
 * Generated class for the SalesPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
    selector: 'page-sales',
    templateUrl: 'sales.html',
})
export class SalesPage {

    public sales: Array<Invoice>;
    public isLoading: boolean;
    public itemExpandHeight: number = 90;
    public page: number;

    constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, public modalCtrl: ModalController, public salesProvider: SalesProvider) { }

    ionViewDidLoad() {
        console.log('ionViewDidLoad SalesPage');
        this.get();

        window.Echo = window.Echo || new Echo({
            broadcaster: 'pusher',
            key: 'xxxxxxxx',
            cluster: 'xxxx',
            encrypted: true
        });

        window.Echo.channel('transactions')
            .listen('TransactionMadeEvent', (e) => {
                this.sales.splice(0, 0, JSON.parse(e.data));
                console.log(e);
            });
    }

    get() {
        // set loading 
        this.isLoading = true;

        this.salesProvider.get()
            .subscribe((data) => {
                console.log(data);
                this.sales = data;
                this.isLoading = false;
            }, (error) => {
                console.log(error);
                this.displayToast(error.message);
            });
    }

    next(infiniteScroll) {
        // set loading 
        this.isLoading = true;
        let lastDate: string = this.sales[this.sales.length - 1].created_at;

        setTimeout(() => {
            this.salesProvider.get(lastDate)
                .subscribe((data) => {
                    this.sales.push.apply(this.sales, data);
                    this.isLoading = false;

                    console.log('Async operation has ended');
                    console.log(this.sales);
                    infiniteScroll.complete();
                }, (error) => {
                    console.log(error);
                    this.displayToast(error.message);
                    infiniteScroll.complete();
                });
        }, 500);
    }


    displayToast(message: string) {
        let toast = this.toastCtrl.create({
            message: message,
            duration: 100000,
            position: 'bottom',
            showCloseButton: true,
            closeButtonText: '×',
            cssClass: 'toast-success'
        });

        toast.onDidDismiss(() => {
            console.log('Dismissed toast');
        });

        toast.present();

        // Dismiss loading spinner
        this.isLoading = false;
    }

    public displayInvoiceModal(invoice) {
        let invoiceModal = this.modalCtrl.create('InvoicePage', { invoice: invoice });
        invoiceModal.present();
    }

    public currentDateTime() {
        return (new Date()).toISOString().substring(0, 16).replace('T', ' ');
    }

    public expandItem(item) {
        this.sales.map((listItem) => {

            if (item == listItem) {
                listItem.expanded = !listItem.expanded;
                console.log(listItem.expanded);
            } else {
                listItem.expanded = false;
            }

            return listItem;

        });

    }
}