Javascript Angular2（v4.2.5）单击事件在*ngIF内不起作用

在Angular中我有以下问题：据我所知，*ngIf指令不允许我在嵌套DOM的组件上添加事件。 代码如下：

模板

组成部分

在这种情况下，我的单击不起作用。我想这是真的 因为*ngIf从DOM中删除我的元素，然后再次创建它，但没有分配事件侦听器

问题是：如何使用click-inside/with*ngIf？或者任何其他的建议来解决这个问题

更新：

我查看了ngIf和ngFor之外的代码，发现您试图在ngFor中直接使用Observable，而不是订阅Observable。一般的想法是，在观察数据之后，您希望将数据推送到适当格式的变量中。有关更多信息，请参阅本指南：

特别是守则的这一部分：

  let subscription = this.data.subscribe(
      value => this.values.push(value),
      error => this.anyErrors = true,
      () => this.finished = true
  );

---

在本例中，this.data将是this.products，this.values将是一个新变量。如果您使用this.finished，您可以在ngIf中将其替换为您的条件

谢谢您的回答！但不幸的是，它没有帮助：你有没有可能愿意创建一个plunkr？你可以用它来尝试和复制：这是一个有效的例子。3秒钟后，ngIf出现，5秒钟后，动态元素发生变化。两者都可以点击并写入控制台。谢谢！我试着在plunkr中做同样的例子，所有的事情都成功了，所以我在我的代码中发现问题出在触发click事件之前隐藏下拉列表的blur中。问题出在触发click事件之前隐藏下拉列表的blur中-原来这也是我的问题。谢谢

/**
 * Created by lizarusi on 02.07.17.
 */
import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import { ProductService } from '../shared/product.service'
import {Product} from '../shared/product.model';

import {Subject} from 'rxjs/Subject';
import {Observable} from 'rxjs/Observable';

import 'rxjs/add/observable/of';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/switchMap';

@Component({
  selector: 'product-search',
  templateUrl: './product-search.component.html',
  styleUrls: ['./product-search.component.scss'],
  providers: [ProductService]
})

export class ProductSearchComponent implements OnInit {

  @ViewChild('productSearch') searchField: ElementRef;
  products: Observable<Product[]>;
  autocomplete = true;
  term = '';
  private searchTerms = new Subject<string>();
  constructor(private productService: ProductService) {};
  search(): void {
    console.log('term ' + this.term);
    this.searchTerms.next(this.term);
  }
  ngOnInit(): void {
    this.products = this.searchTerms
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap( term => this.productService.searchProducts(term))
      .catch((err) => {
          console.log(err);
          return Observable.of<Product[]>([]);
    });
  }
  closeAutocomplete(): void {
    this.autocomplete = false;
  }
  activeAutocomplete(): void {
    this.autocomplete = true;
    this.search();
  }
  update(value: string): void {
    console.log('asaa');
    this.term = value;
    this.searchField.nativeElement.focus();
  }
}

  let subscription = this.data.subscribe(
      value => this.values.push(value),
      error => this.anyErrors = true,
      () => this.finished = true
  );