Как обновить HTML-таблицу в дочернем компоненте, когда я нажимаю кнопку родительского компонента в Angular 4?

Question

Мне нужно обновить HTML-таблицу в дочернем компоненте, когда я нажимаю кнопку родительского компонента в Angular 4.

Событие щелчка моего родительского компонента находится ниже

Resetcount() {
  if (this.step == "child") {
    this.airportmgt.GetAllUserList();
  }
}

Мой дочерний компонент

GetAllUserList() {
  this.auth.Get(myurl).then((user) => {
      let organisationDTOS = user.json();
      this.Users = organisationDTOS.Users;
      console.log(JSON.stringify(this.Users);
      }).catch((e) => {
      `enter code here`
      this.toast.error(this.commethod.getErrorcodeStatus(e));
    })
  }
}

Обратите внимание, здесь я использую массив Users в итерации Html.

Answer 1

parent-component.html

<button type="button" (click)="Resetcount('child')">Button</button>
<child-component></child-component>

parent-component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { AirportMgtService } from "../services/airport-mgt.service";
import { ChildComponentComponent } from "../child-component/child-component.component";

@Component({
    selector: 'app-parent-component',
    templateUrl: './parent-component.component.html',
    styleUrls: ['./parent-component.component.css']
})
export class ParentComponentComponent implements OnInit {
    @ViewChild (ChildComponentComponent) child: ChildComponentComponent;

    public payload;
    constructor(private airportMgtService: AirportMgtService) {  }

    ngOnInit() {
    }

    Resetcount(type) {
        if (type == "child") {
        this.airportMgtService.GetAllUserList()
            .subscribe( (payload) => {
            this.payload = payload;
            this.child.getData(this.payload);
            });
        }
    }
}

airport-mgt.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AirportMgtService {
    private url = 'https://jsonplaceholder.typicode.com/posts';
    constructor(private http: HttpClient) { }

    GetAllUserList() {
        return this.http.get(this.url);
    }
}

child-component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'child-component',
    templateUrl: './child-component.component.html',
    styleUrls: ['./child-component.component.css']
})
export class ChildComponentComponent implements OnInit {
    public jsonData: any;

    constructor() { }

    ngOnInit() {
    }

    getData(data) {
        console.log(data);
    }
}

если вы обнаружите какие-либо трудности, дайте мне знать, я предоставлю вам ссылку jsfiddle.

Answer 2

использование @viewchild() концепции для доступа к методам в дочернем компоненте

пример: дочерний компонент - persondetails.component.ts:

@component({
selector:'person-details'
})
export class PersonDetailComponent {
personDetails:PersonDetails
}

app.component.ts:

import { PersonDetailComponent}  from './persondetail.component';   
@Component({
  selector: "myProject",
  templateUrl: "app.component.html"
})
export class AppComponent { 
  @ViewChild(PersonDetailComponent) personDetail:PersonDetailComponent;
  ngAfterViewInit() {
      this.getChildProperty();
  }
  getChildProperty() {
     console.log(this.personDetail);
  }
}

см. Документацию https://angular.io/guide/component-interaction#parent-calls-an-viewchild