filter () возвращает только первую букву выбранного продукта - PullRequest
Новая
       29

filter () возвращает только первую букву выбранного продукта

0 голосов
/ 17 октября 2018

Я получаю от API два JSON:

Во-первых, это продукты: 

 {
        "StatusCode": 0,
        "StatusMessage": "OK",
        "StatusDescription": [
             {
                "s_id": "11E8C70C8A5D78888E6EFA163EBBBC1D",
                "s_serial": "PknGo",
                "active": 0,
              },
             {
                "s_id": "11E8C70FB9D10DB38E6EFA163EBBBC1D",
                "s_serial": "UgnoX",
                "active": 0,
                },
              {
                "s_id": "11E8C7179F85836D8E6EFA163EBBBC1D",
                "s_serial": "IinnM",
                "active": 0,
                }, .....
            {
                "s_id": "11E8C71905123F1A8E6EFA163EBBBC1D",
                "s_serial": "LVncP",
                "active": 0,
             }
              }]
 }

Секунды, у меня есть этот JSON, который получается по продукту: homeboxp 

{
    "StatusCode":0,
    "StatusMessage":"OK",
    "StatusDescription":
    {"products":[
            {
                "s_serial":"PknGo",
                "s_id":"11E8C70C8A5D78888E6EFA163EBBBC1D"
            },
            {
                "s_serial":"LVncP",
                "s_id":"11E8C71905123F1A8E6EFA163EBBBC1D"
            },
            {
                "s_serial":"IinnM",
                "s_id":"11E8C7179F85836D8E6EFA163EBBBC1D"
            }
            ],
                "hb_id":"11E8C71242B742EC8E6EFA163EBBBC1D",
                "active":0,
          }
}

В этой части кода я получаю все продукты из API и нахожу для продуктов и фильтра: 

 product: Product;
  products: Product[]=[]

  selectedproducts : string = this.products.filter(
    x => x.s_id === this.product.s_id[0])
    .map(y => y.s_serial).join('');




this.ss.getAllproducts ().subscribe(
      products => {
        this.products = products 
         if (this.products && this.products .length > 0) {
      for (let i = 0; i < this.products .length; i++) {
        let ss = this.products .find(x => {
          let p = this.homeboxp.sensors[i];
          return (p && x.s_id === p.s_id);
        });
        if (ss) {
          this.selectedproducts = ss.s_serial[i];
          console.log(this.selectedproducts )
        }
      }
    }
      });

Первая ошибка: this.selectedproducts: это возвращает только первую букву выбранного продукта, а не все значения, РЕШЕНИЕ 

this.selectedproducts = ss.s_serial[i]; to `this.selectedproducts = ss.s_serial;`

Вторая ошибка: EditProductComponent.html: 59 Ошибка: Ошибка ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки.Предыдущее значение: 'undefined: n ,,'.Текущее значение: «undefined: n, n, n».selectedproducts Я использовал в html-коде так: 

<div *ngFor="let sensor of sensorsIdFormArray; let i = index">
    <input formControlName="{{i}}" id="sensors_id" type="text" placeholder="Select Product" [(ngModel)]='selectedproducts'
      aria-label="Number" matInput [matAutocomplete]="auto1">
    <mat-autocomplete autoActiveFirstOption #auto1="matAutocomplete" [displayWith]="displayWith">
      <mat-option (onSelectionChange)="updateForm($event, sensor.s_serial, 's_id', i)"
        *ngFor="let sensor of filteredProducts | async | myPipe: products : 's_serial': i" [value]="sensor.s_id">
        {{sensor.s_serial}}
      </mat-option>
    </mat-autocomplete>
  </div>

Моя труба: 

@Pipe({
    name: 'myPipe'
})
    export class MyPipe implements PipeTransform {
        transform<T>(value: Product, list: T[], field: string, idx: number): T[] {
            const filterValue = value[idx] ? value[idx].toString().toLowerCase() : ''; 
            console.log(filterValue)
            if (filterValue && filterValue.length > 0) {
                return list.filter(sensor => sensor[field].toLowerCase().indexOf(filterValue) === 0);
            }
        }
    }

image

1 Ответ

0 голосов
/ 17 октября 2018

Удержание двух значений название города и идентификатор города будет невозможно для текстового поля.Однако для этого есть обходной путь, если название вашего города всегда уникально.

  1. Получите идентификаторы выбранного города.
  2. Получите название города по идентификатору города
  3. УстановитеЗначение formControl с названием города
  4. На экране позвольте пользователю добавить / удалить название города
  5. После того, как пользователь нажмет кнопку «Сохранить / зарегистрировать», получите идентификатор по названию города и установите дляданные, которые вы отправляете на сервер.

Ниже приведено несколько фрагментов, которые могут вам помочь -

функции для получения названия города и идентификатора города 

 getCityName(cid) {
    return this.city.find(c => c.city_id == cid).name;
  }

  getCityId(name) {
    return this.city.find(c => c.name == name).city_id;
  }

Инициализация элементов управления формы из идентификаторов выходящего города 

 city_id: this.client.forEach(x => {

      x.city_id.forEach(cid => {
        //this.formData.push(new FormControl(x.city_id))
        let control = new FormControl(this.getCityName(cid), Validators.required);
        (<FormArray>this.myform.controls['city_id']).push(control);
      });

    })

Перед сохранением преобразуйте название города в идентификатор города 

onAddprod() {
    let newHbp = this.myform.value;
    let mapped = newHbp.city_id.map(id => this.getCityId(id));
    newHbp.city_id = mapped;
  }

Вот пример демонстрации - https://stackblitz.com/edit/angular-g2hcvs-bnhugp

...