无法读取未定义的属性“库存”

如何解决无法读取未定义的属性“库存”

我正在制作一个Angular应用程序，我想根据用户输入的内容来更新stock的值。

// app.component.ts

export class AppComponent implements OnInit{
    title = 'Products';
    products = [];
    productToUpdate;

    ngOnInit() {
      this.products = this.getProducts();
    }

    getProducts() {
      return [
        { 'id' : '1','title' : 'Screw Driver','price': 400,'stock' : 11},{ 'id' : '2','title' : 'Nut Volt','price': 200,'stock' : 5},{ 'id' : '3','title' : 'Resistor','price': 78,'stock' : 45},{ 'id' : '4','title' : 'Tractor','price': 20000,'stock' : 1},{ 'id' : '5','title' : 'Roller','price': 62,'stock' : 15},]
    }

    changeStockValue(p) {
      console.log(p)
      this.productToUpdate = this.products.find(this.findProducts,[p.id])
      console.log(this.productToUpdate)
      this.productToUpdate['stock'] = this.productToUpdate['stock'] + p.updatedstockvalue;

      console.log(this.productToUpdate)
    }

    findProducts(p) {
      return p.id == this[0]
    }
  }

<!-- app.component.html -->

<div class="container">
    <br>
    <h1 class="text-center">{{title}}</h1>
    <table class="table">
        <thead>
            <th>Id</th>
            <th>Title</th>
            <th>Price</th>
            <th>Stock</th>
        </thead>

        <tbody>
            <tr *ngFor="let p of products">
                <td>{{p.id}}</td>
                <td>{{p.title}}</td>
                <td>{{p.price}}</td>
                <td>{{p.stock}}</td>
                <td><app-stock-status [productId]='p.id' [stock]='p.stock' (stockValueChange)='changeStockValue($event)'></app-stock-status></td>
            </tr>
        </tbody>
    </table>
</div>

// stock-status.component.ts

export class StockStatusComponent implements OnChanges {
  
    @input() stock; number;
    @input() productId: number;
    @Output() stockValueChange = new EventEmitter();
    color = '';
    updatedstockvalue: number;

    constructor() { }

    ngOnInit() {
    }

    stockValueChanged() {
      this.stockValueChange.emit(JSON.stringify({
      id: this.productId,updatedstockvalue: this.updatedstockvalue
    }))

      this.updatedstockvalue = null;
    }

    ngOnChanges() {

      if(this.stock > 10) {
        this.color = 'green';
      } else {
        this.color = 'red';
      }
    }

  }

<!-- stock-status.component.html -->

<input type='number' [(ngModel)] = "updatedstockvalue" />
    <button class="btn btn-primary" [style.background]='color' (click)="stockValueChanged()">Chnage Stock 
    Value</button>

我在这里要做的是首先在app-root中显示产品详细信息，然后通过用户输入的值来更新产品库存的值。

我与父母的关系如下：

app-stock-status-> app-root（子对父母的关系）将stockValueChange对象传递给app-root

app-root-> app-stock-status（子关系的父级），因为app-root将“ stock”和“ productId”传递给app.stock-status

，我有一个“更改库存值”按钮，单击该按钮时应更改所选适当产品的库存字段的值。但是发生的是，当我单击“更改库存值”按钮时，app.component.ts的第32行出现了错误，并且我无法更新库存值。

AppComponent.html：18错误TypeError：无法读取以下内容的属性“ stock” 未定义 在AppComponent.changeStockValue（app.component.ts：31） 在Object.eval [作为handleEvent]（AppComponent.html：18） 在handleEvent（core.js：43993） 在callWithDebugContext（core.js：45632） 在Object.debugHandleEvent [作为handleEvent]（core.js：45247） 在dispatchEvent（core.js：29804） 在core.js：31837 在SafeSubscriber.schedulerFn [作为_next]（core.js：35379） 在SafeSubscriber .__ tryOrUnsub（Subscriber.js：185） 在SafeSubscriber.next（Subscriber.js：124）

有人可以建议这里有什么问题吗？

解决方法

这里是否存在JS find混乱使用的特定原因？根据您提供的信息，以下内容可能会解决问题

changeStockValue(p) {
  console.log(p);
  this.productToUpdate = this.products.find(product => product == p.id); // <-- use an arrow function for the condition
  console.log(this.productToUpdate);
  this.productToUpdate['stock'] = this.productToUpdate['stock'] + p.updatedstockvalue;

  console.log(this.productToUpdate);
}