Angular（6）API値に基づいて、ページの読み込み時に複数のチェックボックスをオンまたはオフとしてマークする

TypeScriptでAngular（6）を（推奨によりPrimeNgコントロールを使用して）自分自身に教えようとしていますが、APIから入力されたオブジェクトの配列から値をロードするための複数のチェックボックスを取得するのに苦労しています。

基本的に、APIから取得した2つのデータセットがあります。fruits[]とuserFavFruits []です。私の目標は、現在のユーザーのAPIから取得したuserFavFruits []に基づいて、ページが読み込まれたときに関連するフルーツチェックボックスをチェックするチェックボックスのリストを表示することです。

私はこことオンラインで見つけたいくつかの異なるアプローチを試しましたが、思ったように何も機能していないようです。

これは、すべてのチェックボックスを選択されたものとしてロードし、userFavFruits []のIDがfruits []に存在するかどうかを気にせず、それに基づいて選択します。これは私がどのように達成するかについて私が確信していないことです。

HTML：

<div style="display: flex; flex-direction: column;">
Fruits:
  <p-checkbox *ngFor="let fruit of fruits;let userFavFruit of 
    userFavFruits;"
    [(ngModel)]="userFavFruit.FruitId" binary="true"
    label="{{fruits.Id}} : {{fruits.Name}}" id="fruits.Id" name="User 
    Favorite Fruits">
  </p-checkbox> 
</div>

TypeScriptクラス：

export class UserFavFruit{
    UserFruitId: number;
    UserId: number;
    FruitId: number;
}

export class Fruit {
    FruitId: number;
    FruitName: string;
}

私のコンポーネントでは、ngOnInit（）のAPIからデータを取得します。

ngOnInit() {
    this.getFruits(); //populates fruits[]
    this.getUserFavFruits();//populates userFavFruits[]
}