javascript - 将 ID(Index) 传递给 onEditDetail() 参数

Question

如何将值索引或 id 传递给 EditDetail() 参数。一旦我单击 html 中的 onEditDetail()，我希望它被放在 onEditDetail() 的括号内

ngOnInit() {
  this.route.params
    .subscribe((params: Params) => {
      this.id = +params['id'];
      this.user = this.userService.getUser(this.id);
    });
}

onEditDetail(id: string) {
  console.log(id);
}

user-detail.component.html

 <div class="container">
  <div class = "row">
    <div class="col-md-3"></div>
    <div class = "col-md-8">
      <div class="card">
        <div class="card-header">
          {{ user.l_name}} 's Complete Information<span class="pull-right"><input class="form-control" placeholder="Search User" name="srch-term" id="srch-term" type="text"></span>
        </div> 
        <table class="table table-responsive">
          <thead class="thead-default">
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Contact Number</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ user.f_name }}</td>
              <td>{{ user.l_name }}</td>
              <td>{{ user.contact_no }}</td>
              <td><button class=" btn btn-primary" style="cursor: pointer;" (click)="onEditDetail()">Edit</button> </td>
            </tr>
          </tbody>
        </table>     
      </div>
    </div>
  </div>
</div>

Answer 1

添加到其他答案，

您需要了解您正在进行异步调用。

因此，如果您需要在其他任何地方访问 id，则需要在异步调用完成时获取它，而不是在那之前。

这就是原因，您需要在订阅块中调用 onEditDetail() 作为最后一个参数。有 3 个参数可供订阅。

1. 通过调用返回的数据，
2. 如果发生任何错误。
3. 如果您想做某事，则完成。

在您的情况下，作为第三个参数，您必须调用 onEditDetail 方法

ngOnInit() {
  this.route.params
    .subscribe((params: Params) => {
      this.id = +params['id'];
      this.user = this.userService.getUser(this.id);

      // 3rd parameter, this is where call is subscribe is completed
      this.onEditDetail(this.id);
    });
}

Answer 2

你可以这样做

ngOnInit() {
  this.route.params
    .subscribe((params: Params) => {
      this.id = +params['id'];
      this.user = this.userService.getUser(this.id);

      // Your method call
      this.onEditDetail(this.id);
    });
}

onEditDetail(id: string) {
  console.log(id);
}

Answer 3

ngOnInit() {
  this.route.params
    .subscribe((params: Params) => {
      this.id = +params['id'];
      this.onEditDetail(this.id); //call onEditDetails and pass id to it.
      this.user = this.userService.getUser(this.id);
    });
}

onEditDetail(id: any) {
  console.log(id);
}