當我單擊Angular 4中父組件的按鈕時，如何更新子組件中的HTML表？

Question

單擊Angular 4中父組件的按鈕時，我需要更新子組件中的HTML表。

我的父組件點擊事件如下

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

注意這里我在HTML迭代中使用Users數組。

Answer 1

使用@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

Answer 2

家長component.html

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

家長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);
            });
        }
    }
}

機場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);
    }
}

兒童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鏈接。