CODEWITHSUNDEEP
angular
Segma
Segma

Reputation: 9

Wrong display data in child component? Angular

All code demonstration and behavior is here:

There is no need to explain much here.

Look at the stackblitz, open the first row (click on the row). You will see the details of that row. Click on the second row, the detail from the first row will be override with those details from the second row.

Example video here ( what is problem ) :

https://vimeo.com/543841393

Example of code:

HTML code is here:

EXAMPLE WHAT NO WORK:

  <ng-container ">
    <div class="d-flex row my-1"> 
        class="w-50"></app-child>
    </div>
  </ng-container>

Why ?

Because public getSingleDispatch(book: any) is http request with new data. This code is only basic example what is problem. Just imagine i got new data with getSingleDispatch function.

Also example what no work property in my situation:

  public test(test: any) {
    return test;
  }

what i say doesn't work doesn't work in my code where i do http request. It would work here in stackblitz demonstration.

Upvotes: 0

Views: 144

Answers (2)

Yoan Asdrubal Quintana Ram&#237;rez
Yoan Asdrubal Quintana Ram&#237;rez

Reputation: 438

I think single detail object only works if you want to show only one detail at time, if you want to show multiples details, you should save multiples data of that details. with httpRequest to get Details

// Inject httpClient or your service to make request. 

public getSingleDispatch(book: any) {
// to avoid to load same detail multimples time, if you already has details saved,
// you only make request if you dont load details previusly.

if( !this.singleDetailsDispatchMap[book.driver]) 
// make request , subscribe and access to response
    this.httpClient.get('http://myApi.test/'+book.driver)
     .subscribe(response => {
     this.singleDetailsDispatchMap[book.driver]=response;
})
  }


// html checking to book expanded and book details 
<ng-container *ngIf="book.expanded && !!singleDetailsDispatchMap[book?.driver]">
        <div class="d-flex row my-1">
          <app-child *ngIf="!!singleDetailsDispatchMap[book?.driver]" 
              [dispatchDetails]="singleDetailsDispatchMap[book?.driver]"
              [closedDetail]="detail"
            class="w-50"></app-child>
        </div>
      </ng-container>

I assumed that in the response comes the detail data that interests you given a book, in this case use as an example that given a driver, the details are obtained.

 this.httpClient.get('http://myApi.test/'+book.driver)
     .subscribe(response => {
     this.singleDetailsDispatchMap[book.driver]=response;
})

After subscribing, the response is saved in the map, using the driver as key, and the details as value,with this structure:

this.singleDetailsDispatchMap = {
"driver1": details1,
"driver2": details2
}

where the values would be what you want to handle in your api. that generates a check in the template and when evaluating

* ngIf = "book.expanded && !! singleDetailsDispatchMap [book? .driver]"

It will be expanded and with values on the map, then it will show the details

Upvotes: 0

eko
eko

Reputation: 40647

When you make this assignment

  public getSingleDispatch(book: any) {
    this.singleDetailsDispatch = book;
  }

you're assigning all child inputs with the selected book.

You can pass the book from the ngFor to your child component (dispatchDetails) directly instead:

  <app-child *ngIf="singleDetailsDispatch" [dispatchDetails]="book" [closedDetail]="detail"
            class="w-50"></app-child>

Updated stackblitz

Upvotes: 1

Related Questions