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

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链接。

当我单击Angular 4中父组件的按钮时，如何更新子组件中的HTML表？

2 个答案: