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

Posted 2023-03-13

【中文标题】将 ID(Index) 传递给 onEditDetail() 参数

【英文标题】：Pass ID(Index) to onEditDetail() Parameters

【发布时间】：2018-02-06 17:13:17

【问题描述】：

如何将值索引或 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>

【参考方案1】：

你可以这样做

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

【讨论】：

它说类型编号的参数不能分配给字符串类型的参数。并且还希望它是一个数字。谢谢

【参考方案2】：

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

【参考方案3】：

添加到其他答案，

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

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

这就是原因，您需要在订阅块中调用 onEditDetail() 作为最后一个参数。 有 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);
    );

【讨论】：

它说类型编号的参数不能分配给字符串类型的参数。并且还希望它是一个数字。谢谢

@Joseph 将您的 onEditDetail(id: string) 更改为 onEditDetail(id: any)

您知道为什么 +params 中有一个“+”号吗？目的是什么？

@Joseph (+) 将字符串 'id' 转换为数字

非常感谢。顺便说一句，我在上面添加了一个 html。一旦我点击编辑按钮，它应该得到 id(index)，所以我可以通过访问 ID 来编辑项目。我的代码正确吗？