反应形式父组件将数据传递给子组件

Question

This is my parent component. When i click on a row in this ag-grid-angular table, it will pass in the selected row details to the child component "app-book-detail-reactive-form".

<div class="jumbotron">
      <div [hidden]="success">
        <h1 class="display-4">Welcome!</h1>
        <p class="lead">Manage your books here (Add, Edit etc)</p>
        <button type="button" class="btn btn-primary" style="float: right;" (click)="goAddBook()"><span class="fas fa-plus-circle"></span> Add Book</button><br>
        <hr class="my-4">
      </div>
      <ag-grid-angular #agGrid style="width: 100%; height: 350px;"
                       class="ag-bootstrap"
                       [gridOptions]="gridOptions"
                       [showToolPanel]="showToolPanel"
                       rowSelection="single"
                       (selectionChanged)="onSelectionChanged($event)"
                       (gridReady)="onGridReady($event)">
      </ag-grid-angular>
      <app-book-detail-reactive-form [book]="selectedBook"></app-book-detail-reactive-form>
    </div>

This is my child component "app-book-detail-reactive-form" which will accept the selectedBook values from parent component. The values sent are in an array of the form

[{
title: "harry potter",
description: "some cool stuff",
instance_list: [{...}, {...}]
}]

///

export class BookDetailReactiveFormComponent implements OnInit {

  @Input() book: any[] = [{
    title: '',
    description: '',
    instance_list: []
  }];

constructor(
    private modalService: NgbModal,
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    console.log(this.book);
    this.bookDetailForm = this.fb.group(
      {
        title: [this.book[0].title, Validators.required],
        description: [this.book[0].description],
        instance_list: this.fb.array(this.book[0].instance_list)
      }
    )
  }
}

This is my html for my reactive form of child component

<div *ngIf="book" [hidden]="success">
  <form [formGroup]='bookDetailForm' (ngSubmit)="onSubmit()" [hidden]="success">
    <div class="form-group">
      <div class="row">
        <div class="col-sm-9">
          <div class="form-group">
            <label>Title of the Book</label>
            <input type="text" class="form-control" placeholder="Title of Book" formControlName="title">
            <div class="alert alert-danger" role="alert" *ngIf="titleAlert.invalid && titleAlert.touched">
              Title of Book required!
            </div>
          </div>
          <div class="form-group">
            <label>Description of Book</label>
            <textarea class="form-control" rows="3" placeholder="Enter Description of book..." formControlName="description"></textarea>
          </div>
        </div>
      </div>
      <hr class="my-4">
    </div>
    <button type="submit" class="btn btn-success">Submit</button>
  </form>
</div>

I just want to pass the values selected from parent component to child componenet and set those selected values as the @input book value in my child component when it is available. Of course the values of @input book is empty at the start. I tried to initialized it to some values but i still get the following error.

I am getting the error "AllBooksComponent.html:15 ERROR TypeError: Cannot read property '0' of undefined".

How can i solve this?

Answer 1

Perhaps a simple:

if(book !== null){

this.bookDetailForm = this.fb.group(
      {
        title: [this.book[0].title, Validators.required],
        description: [this.book[0].description],
        instance_list: this.fb.array(this.book[0].instance_list)
      }
    )

}

Could be enought?

Answer 2

Not use ngInit, use a setter in input, see https://angular.io/guide/component-interaction#intercept-input-property-changes-with-a-setter

_book:any; //declare a variable _book
@Input() 
set book(book:any){
   this._book=book;
   this.bookDetailForm = this.fb.group(
      {
        title: [book.title, Validators.required],
        description: [book.description],
        instance_list: this.fb.array(book.instance_list)
      }
    )
}
get book()
{
   return this._book;
}