访问html angular中的子数组

Question

我正在开发 Angular 应用程序。我在我的应用程序中使用primeng carousel。我的代码如下：

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

堆栈闪电战：

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

尽量避免在 HTML 模板中进行复杂的操作。他们不是 性能好，但做法不好。

此外，也不推荐从 HTML 调用方法（如果产品 ID 在 status 数组中，则可能返回 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>