Question

我从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：检查表达式后，表达式已更改。上一个值：“未定义：n，”。当前值：“未定义：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);
            }
        }
    }

Answer 1

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

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

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

获取城市名称和城市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初始化表单控件

 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

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（）仅返回所选产品的首字母

1 个答案: