ngIf с 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);
 }
}

Теперь мой вопрос: это самый простой способ показать селектор дочернего элемента в родительском элементе при нажатии пользователем. Потому что ошибка: Невозможно прочитать свойство emkan из undefined. Я знаю, что это из-за * ngIf, но не знаю, что мне делать. Также я должен сказать, что могу использовать метод viewchild, как это указано в коде. Спасибо за вашу помощь в легкой форме.


person Amir Gh    schedule 12.09.2017    source источник
comment
Какая польза от создания конструктора AddPropertyPage2Component вне конструктора?   -  person Mr. Sha    schedule 12.09.2017
comment
пожалуйста, предоставьте также код AddPropertyPage2Component   -  person Mr. Sha    schedule 12.09.2017
comment
@Ajmal sha Поскольку AddPropertyPage2 является дочерним элементом AddProperty, и я использую объект (emkan), который существует в дочернем компоненте. И (emkan) - это объект массива checkboxclass.   -  person Amir Gh    schedule 12.09.2017


Ответы (1)


Ваш вопрос немного старше, но у меня была такая же проблема, и, возможно, я смогу помочь другим с моим ответом.

* ngIf удаляет элемент HTML из DOM, поэтому ViewChild не может найти элемент в DOM.

Сначала я хотел использовать директиву ngShow. Но в Angular 5 его больше нет. Но в версии 5 вы можете легко привязаться к свойству [hidden], это не удалит элемент из DOM, а скроет его, как директива ngShow и ViewChild может снова найти элемент.

person parakoopa    schedule 12.03.2018