ngSubmit "myFunction 不是函數" typescript, angular

Question

我有一個地址管理應用程序，我正在嘗試在 ngSubmit 上保存更改。 但是，它說我的 function 不是 function。 我的 HTML：

<div class="form">
  <h4>{{title}}</h4>
  <div class="form-container">
   <form (ngSubmit)="addFriend()">

    <div class="form-group">
        <label for="id">Id</label>
        <input type="text" name="id" [(ngModel)]="friend.id"
        [disabled]="friend.id" class="form-control" required />
    </div>

    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" [(ngModel)]="friend.name"
                            class="form-control" required />
    </div>


    <div class="form-group">
        <label for="address">Address</label>
        <input type="text" name="address" [(ngModel)]="friend.address"
                            class="form-control" required />
    </div>

    <div class="form-group">
        <label for="phone">Phone</label>
        <input type="text" name="phone" [(ngModel)]="friend.phone"
                            class="form-control" required />
    </div>

    <div class="form-group">
      <a class="btn btn-default" routerLink="">Cancel</a>
      <button class="btn btn-primary" >Save</button>
  </div>

  </form>
  </div>
</div>

我在 html 中做錯了什么，還是問題出在其他地方？

addFriend function 在我的 service.ts 文件中定義。

Answer 1

您必須在組件 ts 文件中定義addFriend ，例如

addFriend(){
//some work here
}

Answer 2

您的組件模板無權訪問您的服務，而只能訪問您的組件 class 方法。

所以你需要 1/ 將你的服務注入你的組件 2/ 在你的組件中定義一個調用服務方法的方法

例如在您的組件中：

constructor(private friendsService: FriendsService) {}
....
addFriend(){
    return this.friendsService.addFriend();
}