首页 文章

当我从Angular 4中的父组件单击按钮时,如何更新子组件中的Html表?

提问于
浏览
0

当我从Angular 4中的父组件单击按钮时,我需要更新子组件中的Html表 .

My Parent component click event is below

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

My Child component

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数组 .

2 回答

  • 0

    家长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链接 .

  • 1

    使用 @viewchild() concept来访问子组件中的方法

    示例:子组件 - 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

相关问题