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

Question

旧方法

I'm new in angular. I have hard-coded object in component export class which i'm using for data binding. It's working fine there.now i need to replace same object with real time data.

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>

What i did up to now is i called API in NgOninit method and getting response properly. Here is the function which i'm calling on NgOninit.This gives me error like undefined checked after binding.

**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

您可以创建变量 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>

Answer 2

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

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) ...`

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

Angular : How to replace hard-coded object with real time api?

api

rest

angular

angular6