Angular2事件仅在某些元素上调用

Question

所以我有一个带有表单的模态组件，该组件用于创建DB的条目和编辑现有的条目。

它有MediaRecorder事件的订阅选项，该事件正在成功提交时执行。

由于某种原因会发生什么，这个组件的某些元素订阅会执行而有些则不会执行，而且看起来像“创建模式”上的那些和“编辑模式”上的那些将不会。

代码部分

CreateOrUpdateTransactionComponent：

onSubmit

HTML：

@Component({
    selector: 'create-update-transaction',
    templateUrl: './CreateOrUpdateTransaction.html',
    providers: [AccountTransactionsService]
})
export class CreateOrUpdateTransactionComponent {
    closeResult: string;
    modalRef: NgbModalRef;

    @Input() transaction: Transaction = new Transaction();
    @Input() isCreate: boolean;
    @Output() onSubmit: EventEmitter<void> = new EventEmitter<void>();

    constructor(private modalService: NgbModal,
                private transactionsService: AccountTransactionsService) {}

    sendTransaction(): void{
        let localModalRef = this.modalRef;
        this.transactionsService.createOrUpdateTransaction(this.transaction, (isSuccessful)=>{
            if (isSuccessful) {
                this.onSubmit.emit(); //<--- The problem is here
                localModalRef.close();
            }
        });
    }
}

注意

• 如果我只在表格中显示一行而不使用<table> <caption>Account Transactions</caption> <thead> // Omitted thead </thead> <template let-transaction ngFor [ngForOf]="accountTransactions" let-i="index"> <tr data-toggle="collapse" [attr.data-target]="'#'+i"> // Omitted <td>s <td> //<----These updateTransactions() are not being executed <create-update-transaction [isCreate]="false" [transaction]="transaction" (onSubmit)="updateTransactions()"></create-update-transaction> </td> </tr> <div class="container collapse" [attr.id]="i"> // some content </div> </template> </table> <create-update-transaction [isCreate]="true" (onSubmit)="updateTransactions()"></create-update-transaction> //<---- This updateTransactions() successfully executes （保持对后端的调用以更新数据库），它的工作完全正常。

知道为什么会发生这种情况？

提前致谢！

UPDATE1

调试我可能会注意到，在创建模式下，ngFor是一个带有一个观察者的数组，而在编辑模式下，它是一个带有0个观察者的数组，这就是问题所在。知道为什么吗？

UPDATE2

再次调试，发现this.onSubmit.observers中的this没问题且其this.transactionsService.createOrUpdateTransaction...包含1个观察者，在到达回调代码之前，onSubmit.observers是一个0个观察者的数组

AccountTransactionsService：

this.onSubmit.observers

注意

• 如果我只是执行回调给@Injectable() export class AccountTransactionsService{ private loggedBankAccount: number; private queryObservable: ObservableQuery; constructor(private userManagingService: UserManagingService) { this.loggedBankAccount = userManagingService.getLoggedBankAccountNumber(); this.queryAccountTransactions(); } queryAccountTransactions(): void{ this.queryObservable = // querying the back-end } createOrUpdateTransaction(transaction: Transaction, callback: (isSuccessfull: boolean) => void): void{ let isSuccessful: boolean = false; client.mutate(/*inserting the backend*/).then((graphQLResult) => { const { errors, data } = graphQLResult; if (data) { console.log('got data', data); isSuccessful = true; } if (errors) { console.log('got some GraphQL execution errors', errors); } callback(isSuccessful); }).catch((error) => { console.log('there was an error sending the query', error); callback(isSuccessful); }); } getAccountTransactions(): ObservableQuery{ return this.queryObservable; } } （删除对后端的调用以实际更新数据库），它的工作完全正常，并且此AccountTransactionService.createOrUpdateTransaction事件的所有订阅者都在调用。

onSubmit控制台图像

Answer 1

将null设置为参数：

this.onSubmit.emit(null);

Answer 2

所以我发现情况是ngFor绑定的数据被更新后端的新实例替换，因此，它重新渲染了它的子组件导致重新初始化（destory） + init）它们，这使得Component的实例被覆盖。

为了解决这个问题，我已经将accountTransaction的查询更改为仅进行一次查询，初始化父组件，而不再refetch再次进行查询（这会触发重新呈现）

我向客户端显示只有在服务器端成功的更改，如果他们失败我使用数据备份，那么客户端将保持更新服务器的真实状态而不refetch ING

对未来的观众来说：

问题的关键在于，父组件的*ngFor依赖于子组件中正在发生变化的数据，从而导致重新初始化*ngFor（子组件）之前完成子组件方法的执行。

希望它对某人有所帮助：）