angular2 - bootstrap4为选定的自定义单选按钮添加类

Question

使用boostrap 4将.selected类添加到选定的自定义单选按钮时遇到了一些问题。这是我的代码：

App.component.html

<div class="list-item item-owner text-center selected" 
     [class.selected]="designation"
     *ngFor="let titleList of designations; let idx = index">
  <p><strong>{{titleList.title}}</strong></p>
  <div class="item-icn icn-owner"></div>
  <p class="tx-desc">
    {{titleList.description}}
  </p>
  <input class="type-owner" type="radio"
         name="designationNewStaff"
         [value]="owner"
         [(ngModel)]="owner" hidden/>
</div>

app.component.ts

designations = [];
this.designations = [{
    value: 1,
    data: 'owner',
    title: 'Owner',
    description: 'Manage staff accounts, receive, view & void payment transactions for all stores',
  },
  {
    value: 2,
    data: 'supervisor',
    title: 'Outlet Supervisor',
    description: 'Receive, view & void payment transaction in assigned outlet',
  },
  {
    value: 3,
    data: 'cashier',
    title: 'Outlet Cashier',
    description: 'Receive, view & void payment transaction in assigned outlet',
  }
];