angular - 将正确元素的数据从 ngfor 循环传递给子组件
问题描述
我希望将父组件上的 ngfor 循环中的数据注入到子组件中。当我在父组件模板上单击相应子组件模板的渲染时,该子组件应该使用父组件的 ngfor 循环中正确元素的数据呈现模式(下面的代码显示了子组件模板上的 html 标签父母的模板)。
到目前为止@input() saleItem: SaleItem;
,子组件模型上的属性只接受父组件模板上数组中第一个元素的数据,无论我点击父组件模板上的哪个“销售项目”。如何在 ngfor 循环中实现包含正确元素数据的每个模态渲染的所需行为?
已经尝试 在子组件上使用更改。这不起作用,我假设因为 ngFor 循环中数组的引用实际上并没有改变。
编辑
所以我在开发工具中做了一些挖掘,这是来自 chrome 元素选项卡的快照。 这表明数据实际上被传递到单独呈现的子组件的模板中并显示在模态上,但是当我单击父组件模板上的任意位置时,只有具有第一个元素数据的模态被触发。当我单击父组件模板上应该触发模式的 dom 元素时,如何获得正确的模式来触发,如提供的代码所示? 父组件模型
import { SaleItemsServices } from './../Services/saleItem-service.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sales-page',
templateUrl: './sales-page.component.html',
styleUrls: ['./sales-page.component.scss']
})
export class SalesPageComponent implements OnInit {
// other inits
saleItems: any = [];
imageUrl: String = this.saleItemsService.getItemImageURI();
constructor(private saleItemsService: SaleItemsServices) {}
ngOnInit() {
console.log('im here');
this.populateSaleItems();
}
populateSaleItems() {
this.saleItemsService.getSalesItems().subscribe(
data => {
console.log('data available');
this.saleItems = data;
console.log(this.saleItems);
},
err => {
console.log('there was an error fetching the data');
},
() => {
console.log('done loading sale item data');
}
);
console.log('sale items received are as such' + this.saleItems);
}
}
父组件模板
<div id="backGroundImage">
<div id="salesPageContainer">
<div id="saleItemsContainer">
<p id="banner">This is where the banner will come</p>
<div
*ngFor="let saleItem of saleItems"
id="itemContainer"
data-toggle="modal"
data-target="#modalID"
>
<app-saleitem-modal [saleItem]="saleItem"></app-saleitem-modal>
<img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
<p id="itemName">{{ saleItem.itemName }}</p>
<p id="itemPrice">{{ saleItem.itemPrice }}</p>
</div>
</div>
</div>
</div>
子组件模型
import { SaleItem } from './../../models/saleitem';
import {
Component,
OnInit,
Input,
OnChanges,
SimpleChanges
} from '@angular/core';
import { SaleItemsServices } from '../../Services/saleItem-service.service';
@Component({
selector: 'app-saleitem-modal',
templateUrl: './saleitem-modal.component.html',
styleUrls: ['./saleitem-modal.component.scss']
})
export class SaleitemModalComponent implements OnInit, OnChanges {
@Input() saleItem: SaleItem;
imageUrl: String = this.saleItemsService.getItemImageURI();
constructor(private saleItemsService: SaleItemsServices) {}
ngOnChanges(changes: SimpleChanges) {
if (changes.saleItem) {
console.log(
'the previous value of sale items is' +
JSON.stringify(changes.saleItem.previousValue)
);
console.log(
'the new value of sale items is ' +
JSON.stringify(changes.saleItem.currentValue)
);
}
}
ngOnInit() {
console.log(this.saleItem);
}
}
子组件模板
<div class="modal fade" id="modalID">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 id="saleItemName">{{ saleItem.itemName }}</h3>
</div>
<div class="modal-body">
<img
[src]="imageUrl + saleItem.imageID"
alt=""
id="saleItemModalImage"
/>
<p id="itemWeight">{{ saleItem.itemWeight }}</p>
<p id="itemPrice">{{ saleItem.itemPrice }}</p>
<p id="itemCompany">{{ saleItem.itemCompany }}</p>
<p id="itemCategory">{{ saleItem.itemCategory }}</p>
<!-- Body here -->
<div class="modal-footer">
<div class="col-6">
<!-- Buttons here -->
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
因此,当在父组件模板上单击特定销售项目元素的图像时,我添加了一个函数,该函数获取每个销售项目并将其手动分配给子组件销售项目变量。
父组件模板
<div id="salesPageContainer">
<div id="saleItemsContainer">
<p id="banner">This is where the banner will come</p>
<div *ngFor="let saleItem of saleItems" id="itemContainer">
<img
[src]="imageUrl + saleItem.imageID"
alt=""
id="itemImage"
(click)="passSaleItem(saleItem)"
data-toggle="modal"
data-target="#modalID"
/>
<app-saleitem-modal [saleItem]="saleItemToPass"></app-saleitem-modal>
<p id="itemName">{{ saleItem.itemName }}</p>
<p id="itemPrice">{{ saleItem.itemPrice }}</p>
</div>
</div>
</div>
</div>
父组件模型添加
passSaleItem(saleItem: SaleItem) {
this.saleitemModal.saleItem = saleItem;
}
对于每个组件,每次都会重新渲染模态,这有点拖累。理想情况下,我希望 Modal 被渲染一次,并在单击图像时为每个项目推送数据。这给出了cannot read property of undefined
错误,因为@Input() saleItem
当角度初始化组件时,子组件模型没有使用任何值进行初始化。
因此,我目前对我找到的解决方案感到满意,尽管在应用程序扩展时可能会对性能产生问号。
推荐阅读
- r - 在闪亮的应用程序中更新数据后,隐藏传单地图上的点击事件创建的表格
- swift - 如何在 Swift 中向 MDCTextInputControllerFilled 添加尾随图标?
- angular - 通过 Input 传递的不同对象引用不会触发纯管道
- angularjs - 根据用户对“Sede”进行过滤
- android - 如何让firebase中的所有信息显示在屏幕上
- python - OPENCV PYTHON 中的透视变换
- python - Pandas/Numpy - how to add reoccurring integers in a dataframe column that matches the length of the index
- .net - Post 对象为空 - 角度,.NET Core
- rdf - 像 Protege 这样的 RDF 开发工具?
- html - 如何在不移动文档右侧的元素的情况下将元素的宽度增加到最大值