子组件中的显示数据错误?角度

Question

所有代码演示和行为都在这里：

这里没有必要解释太多。

查看堆栈，打开第一行(单击该行(。您将看到该行的详细信息。单击第二行，第一行中的详细信息将被第二行中的那些详细信息覆盖。

这里的示例视频(什么是问题(：

https://vimeo.com/543841393

代码示例：

HTML代码在这里：

没有工作的例子：

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

为什么？

因为公共getSingleDispatch(book:any(是带有新数据的http请求。这段代码只是问题所在的基本示例。想象一下，我用getSingleDispatch函数得到了新数据。

还有一个例子，在我的情况下没有工作属性：

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

我所说的不起作用在我执行http请求的代码中是不起作用的。它可以在stackblitz演示中工作。

Answer 1

当您进行分配时

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

您正在为所选书籍分配所有子输入。

您可以将book从ngFor直接传递给您的子组件(dispatchDetails(：

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

更新的堆叠式

Answer 2

我认为只有当你想一次只显示一个细节时，单个细节对象才有效，如果你想显示多个细节，你应该保存该细节的多个数据。使用httpRequest获取详细信息

// 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>

我假设在回复中会出现你感兴趣的细节数据，在这种情况下，作为一个例子，给一个司机，细节是得到的。

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

订阅后，响应将保存在地图中，使用驱动程序作为密钥，使用详细信息作为值，其结构如下：

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

其中的值将是您希望在api中处理的值。在模板中生成检查，并且在评估时

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

它将被扩展，并在地图上显示值，然后它将显示的详细信息