Angular：如何用实时 api 替换硬编码对象？

Question

旧方法

我是角度方面的新手。我在组件导出类中有硬编码对象 我用于数据绑定。它在那里工作正常。现在我需要 用实时数据替换相同的对象。

newProduct: any = [
                  { product: "some1", checked: true },
                  { product: "some2", checked: false }
                  ]

 <input id="checkbox" type="checkbox" value="{{newProduct[0].product}}" [(ngModel)]="newProduct[0].checked" [ngModelOptions]="{standalone: true}" (change)="productNotSelected()" checked /><span>{{newProduct[0].product}}</span>

到目前为止我所做的是我在 NgOninit 方法中调用 API 并获取 正确响应。这是我正在调用的函数 NgOninit.This 给我错误，如绑定后检查未定义。

**API Response Object** 

[{
active: "Y"
activeYn: "Y"
category: "somehting"
id: 1
sortOrder: "1"
subProducts:"[
  {
   active: "Y"
   backEndName: "some1"
   checked: "true"
   displayName: "some1"
   id: 100
   sortOrder: "1"
  }
},
{
active: "Y"
activeYn: "Y"
category: "somehting"
id: 1
sortOrder: "1"
subProducts:"[
  {
   active: "Y"
   backEndName: "some2"
   checked: "true"
   displayName: "some2"
   id: 200
   sortOrder: "1"
  }
}
]

listproduct()
    {
    // let checked;
    // let active;
    this.http.getData("findproduct").subscribe((d) => {
    let mydata = d;
    this.result = mydata;
    console.log("@@@@@@@@@",this.result);
    this.selProducts = this.result;
    console.log("@@@@@@@@@",this.selProducts);
    for(var i =0 ;i<this.selProducts.length;i++){
    let p1 = this.selProducts[i].subProducts.filter(p => p.checked);
    // let p2 = p1.filter(p => p.checked == "false");
    let p2 = p1.filter(p => {
    if (p.checked) {
     this.checked = p.checked;
    var product = p.backEndName;
   this.active = p.active;
    this.newProduct.push({
    product: product,
    checked: (this.checked === 'true'),
    active :this.active
    });
    }
    });
    }

    },
    err => {
    this.result = err;
    });
    }

有人可以建议我用实时 api 替换硬编码对象的最佳方法是什么？ 这样其余的功能就不会中断。

Answer 1

错误多，代码难读。我建议你退后一步，简化事情。这是我建议您采用的方法以及一些关于如何编写内容的方法。

export class YourComponent implements OnInit {
  selProducts: any[];
  newProduct: any[];

  constructor(private productsService: ProductsService) {}

  ngOnInit() {
    this.findProduct().subscribe(this.listProduct);
  }

  findProduct = (): Observable<any[]> =>
    this.productsService.getData("findproduct");

  listProduct = products => {
    this.selProducts = products;
    this.selProducts.forEach(product => {
      let p1 = product.subProducts.filter(p => p.checked);

      this.newProduct = p1.map(item => ({
        product: item.backEndName,
        checked: item.checked === "true",
        active: item.active
      }));
    });
  };
}

// Rename your service to something meaningful like ProductsService and move getData there
// Everything is data. Rename getData to getProducts
// result and selProducts contain the same data. use one
// you are not using `p2` somewhere else therefore it's not needed
// you already filtered in `p1` the items that are checked, there is no need to do it again
// by doing `p1.filter` and `if (p.checked) ...`

Answer 2

您可以创建变量products，然后从您的API 分配结果并使用*ngFor 迭代input：

打字稿：

products: any;

this.http.getData("findproduct").subscribe((d) => {
        products = d;
    },
    err => {
        this.result = err;
    });

由于您有嵌套数组，因此您应该使用一个*ngFor 来遍历products，而另一个用于subproducts。所以你的 HTML 应该是这样的：

<div *ngFor="product in products">
    <div *ngFor="subProduct in product.subProducts">
        <input name="product-{{subProduct?.id}}"
              [(ngModel)]="subProduct?.checked"
              #fooInput>
    </div>        
</div>