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

【问题标题】：How to update Html table in child component when I click the button from parent component in Angular 4?当我单击Angular 4中父组件的按钮时，如何更新子组件中的Html表？
【发布时间】：2018-10-13 12:30:48
【问题描述】：

当我在 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 数组。

【问题讨论】：

您的问题缺少重要的实施细节。请补充。另外，您到底想实现什么？
@Arul Vivek 您需要将数据从一个组件传递到另一个组件。我猜角度有这三种方式。通过服务使用诸如行为主体之类的东西来从一个组件发出数据并订阅另一个组件。这可能会有所帮助 -stackoverflow.com/questions/44414226/…

标签： html angular

【解决方案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

【讨论】：

【解决方案2】：

父组件.html

<button type="button" (click)="Resetcount('child')">Button</button>
<child-component></child-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);
    }
}

子组件.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 链接。

【讨论】：

非常感谢。我在子组件新值中打印了控制台数据，但在 html 中没有更改新值，只有我看到了现有值。
如何在不重新加载整个页面的情况下用新值刷新 html 表格。
不是在父组件中订阅，而是在子组件中订阅。
还是不行，能否刷新html中的特定div