今天又迷路了許久，終於找到正確解法了，另外鐵人賽也過去一半了(中場灑花～)

最後的解法是使用自訂 pipe 來篩選技能，實作結果如下：

Custom pipe

import {  Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchfilter'
})

export class SearchFilterPipe implements PipeTransform {
  transform(skills: any[], filter: string): any {
    if (!skills || !filter) {
      return skills;
    }
    return skills.filter(item => item.skillName.indexOf(filter) !== -1);
  }
}

HTML

<input type="text" [(ngModel)]="query" placeholder="search skills...">

<div *ngFor="let s of skills | searchfilter:query" class="mb-2">
    <skills [skill]="s" class="d-flex" (click)="getSkillTotal()" [getSkill]="getSkillTotal()"></skills>
</div>

TS

@Component({
...
  providers: [
...
    StatusItemService
  ]
})

export class SkillListComponent implements OnInit {
...
  query;
...
}

成品如下：
https://i.imgur.com/8qEcKf8.gif

明天再來增加新增技能與刪除技能後，技能欄位功能就完成啦～

= = = = =

你今天的努力，
是否有跟未來的夢想
同一個等級？