今天實作的部分是新增自訂技能與刪除已有技能，實際在寫的時候感覺還滿順利的，把各需要的值取出來後寫 method 就能順利執行了。

以下為實作程式碼：

HTML

<div class="row">
    <div class="col-7 mt-3">
        <h5>新增技能</h5>
        <form #addSkillForm="ngForm" (ngSubmit)="addSkill(addSkillForm.value)">
            <div class="form-row">
                <div class="col">
                    <input type="text" class="form-control" id="newSkillName" name="newSkillName"
                        [(ngModel)]="newSkillName" placeholder="技能名稱">
                </div>
                <div class="col">
                    <input type="number" class="form-control" id="newSkillValue" name="newSkillValue"
                        [(ngModel)]="newSkillValue" placeholder="初始值">
                </div>
                <button type="submit" class="btn btn-primary">新增</button>
            </div>
        </form>
    </div>
    <div class="col-5 mt-3">
        <h5>刪除技能</h5>
        <form #deleteSkillForm="ngForm" (ngSubmit)="deleteSkill(deleteSkillForm.value)">
            <div class="form-row">
                <div class="col">
                    <input type="text" class="form-control" id="deleteSkillName" name="deleteSkillName"
                        [(ngModel)]="deleteSkillName" placeholder="請輸入完整技能名稱（建議使用複製）">
                </div>
                <button type="submit" class="btn btn-primary">刪除</button>
            </div>
        </form>
    </div>
</div>

TS

// 新增技能
newSkillName;
newSkillValue;
addSkill(f: NgForm): void {
  let skillName = this.newSkillName;
  let skillValue = this.newSkillValue;
  let data = {
    skillId: "",
    skillName: skillName,
    basicValue: skillValue,
    value: skillValue,
    carrerChecked: false,
    hobbyChecked: false,
    carrerValue: 0,
    hobbyValue: 0
  };
  this.skills.push(data);
  this.newSkillName = '';
  this.newSkillValue = '初始值';
  alert('技能已新增');
}

// 刪除技能
deleteSkillName;
deleteSkill() {
  const findSkill = this.skills.filter(item => item.skillName === this.deleteSkillName);
  const skillIndex = this.skills.indexOf(findSkill[0]);
  this.skills.splice(skillIndex, 1);
  this.deleteSkillName = '';
  alert('技能已刪除');
}

最後成果：
https://i.imgur.com/2yE3gf3.gif

明天把剩下的功能再評估一下，補上缺少的欄位，之後角色卡應該就可以來做第一次收尾了。

= = = = =

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