3

我是 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);
 }
}

现在我的问题是，当用户单击时，在父级中显示子级选择器的最简单方法是什么。因为错误是：无法读取未定义的属性“emkan”。我知道这是因为 *ngIf 但不知道我该怎么办。另外我应该说我可以在代码中使用 viewchild 方法。感谢您以简单的方式提供帮助。

4

1 回答 1

0

你的问题有点老了，但我遇到了同样的问题，也许我可以通过我的回答帮助其他人。

*ngIf 从 DOM 中移除 HTML 元素，因此 ViewChild 无法在 DOM 中找到该元素。

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

于 2018-03-12T13:36:00.850 回答