访问 html angular 中的子数组

Question

我正在开发 angular 应用程序。我在我的应用程序中使用 primeng 轮播。我的代码如下：

<p-carousel
  [value]="products"
  [numVisible]="3"
  [numScroll]="3"
  [circular]="false"
  [responsiveOptions]="responsiveOptions"
>
  <ng-template pTemplate="header">
    <h5>Basic</h5>
  </ng-template>
  <ng-template let-product let-i="index" pTemplate="item">
    <div class="product-item">
      <div class="product-item-content">
        <div class="p-mb-3"></div>
        <div>
          <p>{{ product.id }}</p>
          <h4 class="p-mb-1">{{ product.name }}</h4>
          <h6 class="p-mt-0 p-mb-3">${{ product.price }}</h6>
          <span
            [class]="
              'product-badge status-' + product.inventoryStatus.toLowerCase()
            "
            >{{ product.inventoryStatus }}</span
          >
          <div class="car-buttons p-mt-5">
            <p-button
              type="button"
              styleClass="p-button p-button-rounded p-mr-2"
              icon="pi pi-search"
            ></p-button>
            <p-button
              type="button"
              styleClass="p-button-success p-button-rounded p-mr-2"
              icon="pi pi-star"
            ></p-button>
            <p-button
              type="button"
              styleClass="p-button-help p-button-rounded"
              icon="pi pi-cog"
            ></p-button>
          </div>
        </div>
      </div>

      <div
        *ngFor="let cityData of myData; let i = index"
        style="position: relative;margin-top: 2rem;border-bottom: 1px solid #4E5668;"
      >
        <div style="display: flex; margin:1em; ">
          <span style="flex:1;">{{ cityData.name }}</span>
          <span style="flex:1;">
            <p-checkbox
              name="product"
              [value]="cityData.id"
              (onChange)="toggleVisibility($event, cityData, product)"
              #checkbox
            ></p-checkbox>
          </span>
        </div>
      </div>
    </div>
  </ng-template>
</p-carousel>

Stackblitz：

https://stackblitz.com/edit/primeng-carousel-demo-fjw4ap?file=src%2Fapp%2Fapp.component.ts

在这个旋转木马中，我有一些复选框，如 stackblitz 中所示。我的数组如下-

myData = [
    {
      myid: 1,
      name: 'paris',
      status: [
        {
          id: 1000,
          active: 1,
        },
        {
          id: 1001,
          active: 1,
        },
      ],
    },
    {
      myid: 2,
      name: 'London',
      status: [
        {
          id: 1003,
          active: 1,
        },
        {
          id: 1004,
          active: 1,
        },
      ],
    },
  ];

因此，当产品数组中的 id 与 myData 数组的状态数组中的 id 匹配时，我想将复选框设置为已选中。因此，在 html 运行时我想在 myData 循环时编写代码，我需要访问 myData 的状态数组并匹配 id。如果 product.id 和 myData.status[i].id 相等，那么我需要检查活动字段。如果 active 为 1，则将 checkbox 设置为 true，如果 active 为 0，则将 se checkbox 设置为 false。

如何让 html 中的这段代码访问上面 html 代码中的状态数组，传递 id 和活动变量的访问值？

Answer 1

Try to avoid complex operations in HTML templates. They are not performant & a bad practice.

此外，也不建议从 HTML 调用方法（如果产品 ID 在 status 数组中，则可以 return true/false）。

最好的方法是将 status 数组转换为 Object 类型 [productId: string]:number

{
      myid: 1,
      name: 'paris',
      status: {
          "1000":1,
          "1001":1,   
       }
},

这样可以更轻松地访问产品 ID myData.status.id。

方法 1： 如果您可以控制后端，则应从那里将 status 转换为一个对象。

方法2：你无法控制后端：当你在响应中得到它时，将status数组转换成一个对象。使用 Rxjs 管道并映射响应：

 getData().pipe(map(response=>{
  //Assuming response is the data currently in this.myData
  response.forEach(city=>{
    const mappedStatus=city.status.reduce((acc,current)=>{
      acc[current.id]=current.active;
      return acc;
    },{});

    city.status={...mappedStatus};
  });
  return response;
}))

在 HTML 中放置复选框的位置：（一个简单的复选框。添加您需要的其他处理程序）

 <p-checkbox
    binary="true"
    trueValue="1"
    falseValue="0"
    [ngModel]="cityData.status[product.id]"
  ></p-checkbox>

访问 html angular 中的子数组

Access sub array in html angular

primeng

angular

angular9

angular10