ngIf with viewchild

时间:2017-09-12 05:55:10

标签: angular angular2-components angular-ng-if viewchild

我是angular2的新人而不是专业人士。当用户点击按钮时,我有一个父子组件,子组件的选择器显示一些东西。因此它应该是条件,并且它也是从子组件中使用的。这是我的代码: 父Html:

<div *ngIf="page2">
      <add-property-page2></add-property-page2>
    </div>

    <div class="text-center col-sm-12">
      <button [disabled]="!propertyForm.form.valid"
              (click)="onSubmit($event,value,amlak)"
              type="submit" class="btn btn-success">Continue
      </button>
    </div>

和父组件:

import {Component, OnInit, ViewChild, ViewEncapsulation, Input } from '@angular/core';
import {Amlak} from '../models/amlak';
import {AddPropertyPage2Component} from './add-paroperty-page2.component';
@Component({
 selector: 'add-property',
 styleUrls: ['./selection.css'],
 templateUrl: './add-property.html',
 providers: [DataService, Amlak],
 })
export class AddPropertyComponent  {
private page2: boolean;
@ViewChild(AddPropertyPage2Component)
private addPropertyPage2: AddPropertyPage2Component;
constructor(private amlak: Amlak, private dataService: DataService
) {
this.userLogined = AuthenticationService.check();
 }
onSubmit($event:any,value,amlak) {
$event.preventDefault();
if (this.page2) {
  this.amlak.emkanat = this.addPropertyPage2.emkan.filter(e => e.checked == 
 true);
 }
}

现在我的问题是,当用户点击时,在父母中显示孩子选择器的最简单方法是什么。因为错误是:无法读取属性&#39; emkan&#39;未定义的。我知道这是因为* ngIf但我不知道该怎么做。 另外我应该说我可以在代码中使用像这样的viewchild方法。 感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

你的问题有点老了,但我遇到了同样的问题,也许我可以帮助别人回答。

* ngIf从DOM中删除HTML元素,因此ViewChild无法在DOM中找到元素。

首先,我想使用ngShow指令。但在Angular 5中它不再存在。但在版本5中,您可以轻松绑定到[hidden]属性,这不会从DOM中删除该元素但会隐藏它,就像ngShow指令和ViewChild可以再次查找该元素一样。