filter()仅返回所选产品的首字母 [英] filter() return only the first letter of product selected

问题描述

我从API获得两个JSON:

I get from API two 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

Seconds, I have this JSON that get by product: 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获取所有产品，并查找产品和过滤器:

In this part of code, I get all products form API, and find for products and filter :

 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:此操作仅返回所选产品的第一个字母，而不是所有值. 解决方案

First error: this.selectedproducts: this return only the first letter of product selected, not all value. SOLUTION

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

第二个错误:EditProductComponent.html:59错误错误:ExpressionChangedAfterItHaHasBeenCheckedError:检查表达式后，表达式已更改.上一个值:'undefined:n ,,'.当前值:未定义:n，n，n". selectedproducts我在html代码中使用了这样的代码:

Second error: EditProductComponent.html:59 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined: n,,'. Current value: 'undefined: n,n,n'. selectedproducts I used in html code like this:

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

推荐答案

文本框将无法保留两个值城市名称和城市ID.但是，如果您的城市名称始终唯一，则可以使用此解决方法.

Holding two values city name and city id will not be possible for by textbox. However there is workaround for this if your city name is always unique.

1. 获取所选的城市ID.
2. 通过城市ID获取城市名称
3. 使用城市名称设置formControl值
4. 在屏幕上，让用户添加/删除城市名称
5. 用户单击保存/注册"按钮后，按城市名称获取ID，并将其设置为要发送到服务器的数据.

以下是可以帮助您的一些摘录-

Below are few snippe which can help you out -

获取城市名称和城市ID的功能

functions to get city name and city id

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

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

根据现有的城市ID初始化表单控件

Initialize form controls from the exiting city ids

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

    })

保存之前，将城市名称转换为城市ID

Before saving, Convert city name to city id

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

这篇关于filter()仅返回所选产品的首字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！