无法读取未定义的属性'stock'

Question

我正在制作一个Angular应用程序，希望根据用户输入的信息更新股票价值。

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

我在这里要做的是首先在应用程序根目录中显示产品详细信息，然后根据用户输入的值更新产品库存的值。

我的亲子关系如下：

应用程序库存状态->将stockValueChange对象传递给应用程序根时的应用程序根

应用程序根目录->应用根传递"stock"时的应用库存状态(父子关系(productId'到app.stock-status

我有一个"更改库存值"按钮，当点击该按钮时，应更改所选适当产品的库存字段的值。但当我点击"更改股票价值"按钮时，app.component.ts的第32行出现错误，我无法更新股票价值。

AppComponent.html:18错误类型错误：无法读取的属性"stock"未定义的位于AppComponent.changeStockValue(app.component.ts:31(在Object.eval〔as 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[as_next](core.js:35379(在SafeSubscriber__tryOrUnsb(订阅服务器.js:185(在SafeSubscriber.next(Subscriber.js:124(

有人能指出这里出了什么问题吗？

Answer 1

这里复杂使用JSfind有具体原因吗？根据您提供的信息，以下可能会解决问题

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);
}