真值和假值在复选框中不起作用

Question

我正在开发 angular 应用程序并使用 primeng.I 的树表，我正在使用 primng v9。我的代码如下：

<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"
              binary="true"
              [trueValue]="1"
              [falseValue]="0"
              [ngModel]="cityData.status[product.id]"
              (onChange)="toggleVisibility($event, cityData, product)"
              #checkbox
            ></p-checkbox>
          </span>
        </div>
      </div>
    </div>
  </ng-template>
</p-carousel>

堆栈闪电战： https://stackblitz.com/edit/primeng-carousel-demo-wwfs9w?file=src%2Fapp%2Fapp.component.html

我收到以下错误：

Can't bind to 'trueValue' since it isn't a known property of 'p-checkbox'.

与 falseValue 相同。我该如何解决？

Answer 1

没有使用过 PrimeNG，但基于他们的文档和示例：

假设它是 9.2.8-lts，根据他们的文档 https://www.primefaces.org/primeng/v9-lts/#/checkbox p-checkbox 没有任何这样的属性。相反，您可以使用 [(ngModel)]

来跟踪所选状态

所以您需要做的是将循环设置为：

<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"
              binary="true"
              value="city" 
              [value]="city"
              [(ngModel)]="selectedCities"
              (onChange)="toggleVisibility($event, cityData, product)"
              #checkbox
            ></p-checkbox>
          </span>
        </div>
      </div>
    </div>

然后在您的组件文件中，您将定义一个 selectedCities 数组，该数组的类型与整个 myData 数组的类型相同。

请参阅他们的文档中附带的 stackblitz。

编辑：看起来 trueValue 和 falseValue 是在版本 12 中添加的。https://www.primefaces.org/primeng/v12-lts/#/checkbox

Answer 2

Primeng v9 没有 trueValue 和 falseValue。

在 v9 中，您需要像这样将布尔值绑定到 p-checkbox：

<p-checkbox
 name="product"
 binary="true"
 [ngModel]="cityData.status[product.id]===1"
 (onChange)="toggleVisibility($event, cityData, product)"
 #checkbox
 ></p-checkbox>

在这里，您要向 p-checkbox 添加单向绑定。这将一个布尔值与复选框绑定：cityData.status[product.id]===<your-expected-value>

真值和假值在复选框中不起作用

trueValue anf falseValue not working in checkbox

primeng

angular

angular9