Question

我昨天遇到一个小问题，从那以后我无法调试它的原因。我用管道制作了一些角度应用程序，但我从未遇到过这样的语法问题，我会在下面将其发布，但现在它仍然存在给我一个错误AllTrucksComponent.html：7错误TypeError：无法读取未定义的属性'indexOf'

这是代码：管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'detailspipe'
})
export class DetailsPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(!args) {
      return value;
    }

    return value.filter(item=> {

       console.log('item', item);   // ADDED LINE

       item.details.indexOf(args)!==-1);
    }

  }

}

html

    </div>
    <div class="form-group">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Details" [(ngModel)]="details" ng-minlength="1" >
      </div>

    </div>



  <h4>Trucks</h4>

  <table class="table">
      <thead class="thead-dark">
        <tr>
          <th scope="col">#</th>
          <th scope="col">Model</th>
          <th scope="col">Year</th>
          <th scope="col">Details</th>
          <th scope="col">Milleage</th>
          <th scope="col">Price</th>
          <th scope="col">Buy</th>
          <th scope="col">Delete</th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let truck of trucks | detailspipe:details">
          <th scope="row">{{truck.ID}}</th>
          <td>{{truck.MODEL_ID}}</td>
          <td>{{truck.YEAR}}</td>
          <td>{{truck.DETAILS}</td>
          <td>{{truck.MILLEAGE}}</td>
          <td>{{truck.PRICE}}</td>
          <td> <button (click)="addToCart()" class="btn btn-primary">BUY</button></td>
          <td> <button (click)="deleteTruck(truck.ID)" class="btn btn-primary">DELETE</button></td>

        </tr>
      </tbody>
    </table>

Answer 1

看起来像

Item.details未定义

，并且您尝试对未定义的对象执行indexOf。可能会添加

之类的支票

If(item.details){ 
   item.details.indexOf(args)!==-1
 }

您可以更改为管道中的以下代码段

transform(value: any, args?: any): any {
 if(args)
   return value.filter(item=>item.details.indexOf(args)!==-1);
 else
   return value;
 }

角管误差指数

1 个答案: