How to use the Rating component in a Virtual Scroller?

[AlinaN]

Hello, I am new to PrimeNG and Angular.
I'm having some problems with the 'Rating' component.
My code is below with comments and questions and here is a link to my repository:
https://github.com/AlinaShtramwasser/Winery/tree/rating
I would appreciate any help you might provide!

1. I can see the stars, but my default value isn't being recognized - i.e. the stars are empty. I've declared the variable I mean to use and gave it a default value, like in the example but it's not being applied.

2.My aim was to use the 'Rating' component in a Virtual Scroller and bind it to the winery's rating, is it possible to do something like that and how would I go about doing it?

=======================================
winery-list.component.html

<div class="card">
//For the first question - I'm just trying to bind the p-rating to the variable 'val' that I have declared and set to 3 in the associated class

<h3 class="p-mb-2"><p-rating [cancel]="false" [(ngModel)]="val"></p-rating></h3>

//For the second question - please see below:
<p-virtualScroller [value]="wineries" scrollHeight="500px" [itemSize]="100">
<ng-template pTemplate="header">
<div class="p-d-flex p-ai-center p-jc-between pb-5">
My Wineries
<div class="float-end">
<button class="pull-right" mat-fab color="accent">
<span class="material-icons">add</span>
</button>
</div>
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By" (onChange)="onSortChange()" [style]="{'min-width':'10em'}"></p-dropdown>
</div>
</ng-template>
<ng-template let-winery pTemplate="item" let-i="index">
<div class="winery-item">
<div class="image-container">
<img src="assets/images/wineryLogo.jpg" alt="{{winery.Name}}" style="display:inline-block;margin:2px 0 2px 2px" width="100">
</div>
<div class="winery-list-detail">
<div class="ps-2">{{winery.Name}}</div>
</div>
<div class="winery-list-action">

//Here I would like to bind the p-rating to winery.Rating but I'm not sure how to do it or if it's possible at all.

<h3 class="p-mb-2"><p-rating [cancel]="false" [(ngModel)]="?"></p-rating></h3>
<!-- <h3 class="p-mb-2">{{winery.Rating}}</h3> -->
<span class="pull-right">{{winery.Phone}}</span>
</div>
</div>
</ng-template>
</p-virtualScroller>
</div>

part of the .ts file:
export class WineryListComponent implements OnInit, OnDestroy {
/*
local variables
*/
val: number = 3;

Thank you!

[AlinaN]

Solved I needed to import the FormsModule
import { FormsModule } from '@angular/forms';

and then ...
imports: [
FormsModule,