trueValue anf falseValue not working in checkbox-CodePudding

I am working on angular app and using treetable of primeng.I am using primng v9. my code is as follows:

<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 >
      <div >
        <div ></div>
        <div>
          <p>{{ product.id }}</p>
          <h4 >{{ product.name }}</h4>
          <h6 >${{ product.price }}</h6>
          <span
            [class]="
              'product-badge status-'   product.inventoryStatus.toLowerCase()
            "
            >{{ product.inventoryStatus }}</span
          >
          <div >
            <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>

Stackblitz: https://stackblitz.com/edit/primeng-carousel-demo-wwfs9w?file=src/app/app.component.html

I am getting following error:

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

same for falseValue. How can I resolve this?

CodePudding user response：

Primeng v9 doesn't have trueValue and falseValue.

In v9, you need to bind a boolean to p-checkbox like this:

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

Here, you are adding a 1-way binding to the p-checkbox. This binds a boolean value with checkbox:cityData.status[product.id]===<your-expected-value>

CodePudding user response：

Haven't used PrimeNG, but based on their docs and examples:

Assuming it is 9.2.8-lts, per their docs https://www.primefaces.org/primeng/v9-lts/#/checkbox p-checkbox does not have any such property. Instead you would track the selected state by using the [(ngModel)]

So what you would need to do is set your loop to be like:

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

Then in your component file you would define a selectedCities array which will be of the same type as what your overall myData array is.

Refer to their stackblitz that is attached in their docs.

Edit: Looks like trueValue and falseValue were added in version 12. https://www.primefaces.org/primeng/v12-lts/#/checkbox