Angular4：如何将选中的md_id值传入服务？

嘿，作为Angular新手，你遇到的这个问题其实很常见，咱们一步步来解决它～首先得先修正模板里的一些小问题，然后再实现选中id并传入服务的逻辑：

第一步：修正HTML模板的问题 #

你当前的模板里有几个不太合适的地方：

• <td>不是表单控件，不需要用[(ngModel)]和ngDefaultControl，这两个指令是给表单元素（如input、select）设计的，放在td上不仅没用还可能引发错误
• 循环里每个td的id="md_id"会导致DOM中出现重复id，这不符合HTML规范，而且也没必要保留

修改后的模板应该是这样的，点击的时候直接把当前行的md_id传给runPromo方法：

<tr *ngFor="let item of driverData">
  <td class="align-right" (click)="runPromo(item.md_id)">{{item.driver_name}}</td>
</tr>

第二步：组件类中实现选中逻辑并调用服务 #

接下来在你的组件里，我们需要定义一个变量存储选中的id，然后在runPromo方法里接收这个id，再把它传给你的服务。

首先，确保你已经注入了需要的服务，然后写组件逻辑：

import { Component } from '@angular/core';
// 替换成你实际的服务路径
import { DriverService } from './driver.service';

@Component({
  selector: 'app-driver-list',
  templateUrl: './driver-list.component.html'
})
export class DriverListComponent {
  // 你的JSON数据
  driverData = [
    {"md_id": 1, "driver_name": "A"}, 
    {"md_id": 2, "driver_name": "B"}, 
    {"md_id": 3, "driver_name": "C"}, 
    {"md_id": 4, "driver_name": "D"}
  ];
  // 存储选中的md_id
  selectedMdId: number | undefined;

  // 注入服务
  constructor(private driverService: DriverService) {}

  runPromo(mdId: number) {
    // 保存选中的id
    this.selectedMdId = mdId;
    console.log('当前选中的司机ID:', this.selectedMdId);
    
    // 调用服务的方法，传入选中的id
    this.driverService.processDriverAction(this.selectedMdId)
      .subscribe({
        next: (result) => {
          // 处理服务返回的成功结果
          console.log('操作执行成功:', result);
          // 这里可以添加你需要的后续逻辑，比如提示用户、更新视图等
        },
        error: (err) => {
          // 处理请求错误
          console.error('操作失败:', err);
          // 比如显示错误提示给用户
        }
      });
  }
}

第三步：编写服务的功能方法 #

假设你的服务是用来和后端交互或者处理业务逻辑的，这里给一个示例服务，使用Angular的HttpClient来发送请求（记得在模块里导入HttpClientModule）：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root' // 让服务在整个应用中可用
})
export class DriverService {
  constructor(private http: HttpClient) {}

  // 接收md_id并执行对应功能的方法
  processDriverAction(mdId: number): Observable<any> {
    // 替换成你实际的后端API地址
    const apiUrl = `/api/drivers/${mdId}/promo`;
    // 如果是POST请求，就用post方法，传参根据后端要求调整
    return this.http.post(apiUrl, { driverId: mdId });
    // 如果是GET请求：return this.http.get(apiUrl);
  }
}

第四步：确保模块导入了必要的依赖 #

最后，在你的根模块（比如AppModule）里导入HttpClientModule，这样服务才能使用HttpClient：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 导入这个

import { AppComponent } from './app.component';
import { DriverListComponent } from './driver-list/driver-list.component';

@NgModule({
  declarations: [
    AppComponent,
    DriverListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 添加到imports数组里
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样一来，当你点击某个司机的名字时，对应的md_id就会被传入runPromo方法，然后传递给服务，服务就可以用这个id去执行你需要的功能啦～

内容的提问来源于stack exchange，提问作者Neha Uniyal