Блог

Главная - Вопросы по программированию - Не удается прочитать свойство ‘stock’ неопределенного

Не удается прочитать свойство ‘stock’ неопределенного

#javascript #angular #typescript #eventemitter #angular-event-emitter

#javascript #угловой #typescript #eventemitter #angular-event-эмиттер

Вопрос:

Я создаю угловое приложение, в котором я хочу обновить значение 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 (дочернее родительское отношение) as передает объект stockValueChange в app-root

app-root -> app-stock-status (родительское дочернее отношение), поскольку app-root передает ‘stock’ amp; ‘ProductID’ в app.stock-status

и у меня есть кнопка «Изменить значение запаса», при нажатии на которую должно измениться значение поля запаса соответствующего выбранного продукта. Но что происходит, так это то, что когда я нажимаю кнопку «Изменить значение запаса», это выдает ошибку в строке 32 app.component.ts, и я не могу обновить значение запаса.

ОШИБКА AppComponent.html:18 ОШИБКА ТИПА: не удается прочитать свойство ‘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)

Может кто-нибудь подсказать, что здесь не так?

Ответ №1:

Есть ли конкретная причина для запутанного использования 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);
}