Как понять следующий код, это служит каналом в проекте Angular

Question

Фон:

Я строю проект SIM-карты с Angular 7. Используя этот следующий канал, выберите соответствующие элементы внутри массива (список []) и отобразите его вUI.С заголовком (filterField) каждого элемента и входной строкой (ключевым словом).

поэтому у меня есть следующий код:

pipe

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(list:any[], filterField:string, keyword:string){
    if(!filterField || !keyword){return list;}else{
      return list.filter(item =>{
          let fieldValue = item[filterField];
          return fieldValue.indexOf(keyword)>=0;
        }  
      )
    }
  }
}

Это список [] детали:

 private products: Product[] = [
    new Product(1, '1st Product', 1.99, 3.5, 'This is the 1st product, which is used for display', ['Electronics', 'Hardware']),
    new Product(2, '2nd Product', 2.99, 2.5, 'This is the 2nd product, which is used for display', ['Books']),
    new Product(3, '3rd Product', 3.99, 4.5, 'This is the 3rd product, which is used for display', ['Hardware']),
    new Product(4, '4th Product', 4.99, 1.5, 'This is the 4th product, which is used for display', ['Electronics', 'Hardware']),
    new Product(5, '5th Product', 5.99, 3.5, 'This is the 5th product, which is used for display', ['Electronics']),
    new Product(6, '6th Product', 6.99, 2.5, 'This is the 6th product, which is used for display', ['Books'])
  ]


export class Product {

  constructor(
    public id: number,
    public title: string,
    public price: number,
    public rating: number,
    public desc: string,
    public categories: Array<string>
  ) {
  }
}

product.component.html

<div class="row">
  <div class="col-sm-12">
    <div class="form-group">
      <input class="form-control" placeholder="Please Input" [formControl]="titleFilter">
    </div>
  </div>
</div>


<div *ngFor="let product of products | filter:'title':keywordInput" class="col-md-4 col-sm-4 col-lg-4">
  <div class="thumbnail">
    <img src="https://via.placeholder.com/320x150">
    <div class="caption">
      <h4 class="pull-right">{{product.price}} Euro</h4>
      <h4><a [routerLink]="['/product',product.id]">{{product.title}}</a></h4>
      <p>{{product.desc}}</p>
    </div>
    <div>
      <app-stars [rating]="product.rating"></app-stars>
    </div>
  </div>
</div>

product.component.ts

export class ProductComponent implements OnInit {

products:Array<Product>;
keywordInput:string;
titleFilter:FormControl=new FormControl;

  constructor(private productService:ProductService) {
    this.titleFilter.valueChanges.pipe(debounceTime(500))
      .subscribe(
        value => this.keywordInput = value,
      );
   }

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

  }
}

Вопросы:
1. как понять

itemTitle => {
          let fieldValue = itemTitle[filterField];
          return fieldValue.indexOf(keyword) >= 0;
        }

Я не мог понять часть itemTitle [filterField], я предполагаю, что itemTitle - заголовок каждого элемента, но как работает []?

.filter уже устарел в Angular 7?Есть ли альтернатива для этого?

для следующей части

return fieldValue.indexOf(keyword) >= 0;

Могу ли я использовать это для альтернативы?

if (fieldValue.indexOf(keyword) >= 0) {
  return fieldValue.indexOf(keyword)
} else {return null;}

Когда я запускаю его, он не работает,

спасибо!

Answer 1

как понять

itemTitle => {
      let fieldValue = itemTitle[filterField];
      return fieldValue.indexOf(keyword) >= 0;
}

Вероятно, item не itemTitle в вашем коде.Таким образом, item - это каждый из Product объектов в списке.

filterField - это второй аргумент канала, который в вашем случае равен title.

* 1016.* получит title объекта продукта.Это может быть «1-й продукт», «2-й продукт» и т. Д.

fieldValue.indexOf(keyword) будет искать наличие значения keyword (вероятно, того, что вы вводите в поле ввода) в fieldValueстрока.Если keyword присутствует в строке, то он вернет начальный индекс, если нет, он вернет -1

return fieldValue.indexOf(keyword) >= 0; вернет true или false в зависимости от того, keyword строка присутствовала в заголовке или нет.

.filter уже устарел в Angular 7?Есть ли альтернатива для этого?

Нет, filter - это метод на прототипе JavaScript Array, здесь он не имеет никакого отношения к angular.И нет, это не устарело.

Могу ли я использовать это как альтернативу?

if (fieldValue.indexOf(keyword) >= 0) {
  return fieldValue.indexOf(keyword)
} else {return null;}

Нет, вы не можете использовать это для достижения того, что уже достигнуто,Видите ли, если вы используете фильтр Array, если вы хотите удалить элемент из Array, вы возвращаете ложное значение, если вы хотите сохранить элемент, вы возвращаете истинное значение.В этом вашем коде вы возвращаете либо индекс найденной строки, либо ноль.Это будет работать во всех случаях, кроме случаев, когда найденный индекс будет 0.Если ключевое слово было найдено в самом начале, то этот объект продукта будет удален из списка, так как вы будете возвращать 0 (что неверно).

Answer 2

Я предполагаю, что itemTitle - это название каждого элемента, но как работает []?

Это средство доступа к свойствам.Это не англоязычная вещь, это вещь JS.По сути, obj['foo'] является эквивалентом obj.foo, но в нотации [] имя свойства может быть динамическим, его можно передавать в качестве аргумента.Как в твоей трубе.