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();
}