將右元素的數據從ngfor循環傳遞給子組件

Question

我希望將父組件上的ngfor循環中的數據注入子組件。 當我在父組件模板上單擊相應的子組件模板的渲染時，此子組件應該使用父組件的ngfor循環中的右元素的數據呈現模態（下面的代碼顯示了子組件模板上的html標簽）父母的模板）。

到目前為止@input() saleItem: SaleItem; 子組件的模型上的屬性只接收父組件模板上數組中第一個元素的數據，無論哪個'銷售項'我點擊父組件的模板。 如何在ngfor循環中實現包含正確元素數據的每個模態渲染的所需行為？

已經嘗試使用子組件上的更改。 這不起作用，我假設因為ngFor循環中數組的引用實際上沒有改變。

編輯

所以我在開發工具中進行了一些挖掘，這是從chrome中的Elements選項卡中快速拍攝的。 這表明數據實際上是傳遞給單獨渲染的子組件的模板並顯示在模態上，但是當我單擊父組件模板上的任何位置時，只會觸發具有第一個元素數據的模態。 當我點擊應該觸發模式的父組件模板上的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>

Answer 1

因此，當在父組件模板上單擊特定銷售項目元素的圖像時，我添加了一個功能，該功能獲取每個銷售項目並手動將其分配給子組件銷售項目變量。

父組件模板

  <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錯誤的cannot read property of undefined因為當角度初始化組件時，子組件模型上的@Input() saleItem未使用任何值進行初始化。

因此，我現在可以使用我找到的解決方案，盡管在應用程序擴展時可能會出現性能問題。