如何在子组件Angular中获取数组？

Question

I am passing array to child component but it return empty array with zero length, but in parent it works fine.

Check below

Here is my code

HTML

<app-schema-form [schema]="product_fields"></app-schema-form>

TS

export class SingleProductComponent implements OnInit {

  product_id: any;
  product_fields = [];

  constructor(...) { }

  ngOnInit() {
    this.product_id = ...;
    this.getProductFields();
  }

  getProductFields() {
    this.api.get('productfields', this.product_id).subscribe(res => {
      if (res[0]) {
        JSON.parse(res[0].product_fields).forEach(element => {
          this.product_fields.push(element);
        });
      }
      console.log(this.product_fields);
    })
  }
}

export class SchemaFormComponent implements OnInit {

  @Input() schema: string[];

  constructor() { }

  ngOnInit() {
    console.log(this.schema);
  }
}

Answer 1

You're logging the child values in the ngOnInit of the child. The parent will pass the value after your service has returned its value. Your service will certainly return the value after the child's ngOnInit has been called.

To ensure you run code after the child value has been received, use ngOnChanges() .

The docs for ngOnChanges states that it is:

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

export class SchemaFormComponent implements OnChanges {

  @Input() schema: string[];

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.schema) {
      console.log(this.schema);
    }
  }
}

Another issue you are having is that you are initialising your product_fields array as empty. This means that when you push new values to your array, ngOnChanges() doesn't get run as it is still the same object . Instead, leave your array as undefined and only set it once you have the data. This will trigger ngOnChanges in the child once it is set.

export class SingleProductComponent implements OnInit {

  product_id: any;
  product_fields: []; // <--- declare undefined array

  constructor(...) { }

  ngOnInit() {
    this.product_id = ...;
    this.getProductFields();
  }

  getProductFields() {
    this.api.get('productfields', this.product_id).subscribe(res => {
      if (res[0]) {
        // assign array here
        this.product_fields = JSON.parse(res[0].product_fields); 
      }
      console.log(this.product_fields);
    })
  }
}

Answer 2

Parent

export class SingleProductComponent implements OnInit {

  product_id: any;
  product_fields: any[];

  constructor(...) { }

  async ngOnInit() {
    this.product_id = ...;
    await this.getProductFields();
  }

   async getProductFields() {
      const response = await this.api.get('productfields', this.product_id).toPromise();
      if (response[0]) {
         this.product_fields = JSON.parse(response[0].product_fields);
      }
      console.log(this.product_fields);
  }

HTML

<app-schema-form [schema]="product_fields"></app-schema-form>

Child

export class SchemaFormComponent implements OnInit, OnChanges {

  private _schema: string[];
  public get schema(): string[] {
    return this._schema;
  }

  @Input()
  public set schema(value: string[]) {
    this._schema = value;
  }

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
     if (changes.schema) {
        console.log(this.schema);
     }
  }
}

Answer 3

In order to trigger angular's life cycle you need to create a change of reference. When you use

JSON.parse(res[0].product_fields).forEach(element => {
    this.product_fields.push(element);
});

you push elements to an existing array. In order to change the reference of the array all you need to do is

this.product_fields = [...res[0].product_fields]

Now, since you get the products in an async way, you cannot assume that the data is there on init. I'd do the following:

export class SchemaFormComponent {
    private _schema: string[];
    @Input() set schema(_schema: string[]) {
        console.log('_schema: ', _schema);
        this._schema = _schema;
    }

    get schema(): string[] {
        return this._schema;
    }

    constructor() { }
}

Hope this helps!