Question

customer.component.html

customer.component.ts

import { CustomerService } from './../../_services/customer.service';
import { Address } from './../../_models/address.model';
import { Customer } from './../../_models/customer.model';
import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomerComponent implements OnInit {

  customers: Customer[]=[];

  selectedCustomer: Customer;
  constructor(
    private _customerService: CustomerService,
  ) { }

  ngOnInit(): void {

    this.getCustomers();

    // this._customerService.getAll().subscribe(
    //   response => {
    //     return response;
    //   },
    //   error => {
    //   return [];
    //   }
    // );


  }


  newCustomerHandler() {
    this.selectedCustomer = <Customer>{
      firm: 4,
      name: null,
      phone: null,
      email: null,
      dob: null,
      occupation: null,
      address: {
        line1: null,
        line2: null,
        city: null,
        pincode: null,
        states: null,
        country: 'India'
      },
      gst: null,
      pan: null,
      city: null,
      gender: 'MALE',
    };
  }

  selectedCustomerHandler(custoemrId: number) {
    this.selectedCustomer = Object.assign({}, this.customers.find((customer: Customer) => customer.id === custoemrId));
  }


  saveCustomerHandler(customer: Customer) {

    if (!customer.id) {
      // Add a new product
      console.log('Add new Customer1');
      console.log(customer);

      this._customerService.create(customer).subscribe(
        (response: Customer) => {
          alert('Added Successfully');
          this.selectedCustomer = null;
        },
        error => {
          alert('Failed to add');
        }
      );
    } else {
      console.log('Update Customer');
    }
   
  }


  getCustomers() {

    this._customerService.getAll().subscribe(
      response => {
        this.customers = response;
      },
      error => {
        return [];
      }
    );
  }
}

customer-list.component.html

<h2>Manage Customer</h2>
<div class="customer-list">
    <div class="row">
      <div class="col-md-9">
      </div>
      <div class="col-md-3" style="float:right;">
        <button type="button" class="btn btn-block btn-primary" (click)="onNewClick.emit()">CREATE NEW CUSTOMER</button>
      </div>
    </div>
    <div class="table-responsive">
        <table class="table m-0">
          <thead>
          <tr>

            <th>Name</th>
            <th>Gender</th>
            <th>Email</th>
            <th>Phone</th>
            <th>PAN</th>
            <th>GST</th>
            <th>Occupation</th>
            <th>DOB</th>
            <th>City</th>
          </tr>
          </thead>
          <tbody>

            <tr *ngFor="let customer of customers" >
              <td>{{customer.name}}</td>
              <td>{{customer.gender}}</td>
              <td>{{customer.email}}</td>
              <td>{{customer.phone}}</td>
              <td>{{customer.pan}}</td>
              <td>{{customer.gst}}</td>
              <td>{{customer.occupation}}</td>
              <td>{{customer.dob | date}}</td>
              <td>{{customer.city}}</td>
            </tr>
          </tbody>
        </table>
      </div>
  </div>

cusotmer-list.component.ts

import { Address } from './../../_models/address.model';
import { Customer } from './../../_models/customer.model';
import { Component, OnInit, Input, Output, ChangeDetectionStrategy, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomerListComponent implements OnInit {

  @Input() customers: Array<Customer>;
  @Output() onSelected: EventEmitter<number> = new EventEmitter<number>();
  @Output() onNewClick: EventEmitter<void> = new EventEmitter<void>();
  constructor() { }
  ngOnInit(): void {
    console.log(this.customers);
  }
}

customer.component.htmls是我的父组件，我正在将数据发送到子组件customer-list.component.html，但是子组件未接收数据。父组件从rest API获取数据，该数据将传递给子组件。

Answer 1

更改CustomerListComponent.ts

ngOnInit(): void {
  console.log(this.customers);
}

到

ngOnChanges(): void {
   console.log(this.customers);
}

Answer 2

Angular将CustomerComponent和CustomerListComponent视为两个单独的组件，而不是父子组件，因为您没有在<app-customer-list>中的任何地方调用CustomerComponent。要使其成为子组件，请将组件标签放在您要呈现它的customer-list.component.html中。

如果要在不相关的组件之间传递数据，则必须在它们之间创建一个service that is shared并使用Subject来传递数据。

子组件未从父组件加载数据

2 个答案: