Question

我是Angular 4的新手。我有一个变量“md_id”，它绑定到视图如下。

HTML：

                    <tr *ngFor="let item of driverData">
                        <td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId" ngDefaultControl (click)="runPromo()">{{item.driver_name}}
                        </td>
                    </tr>

JSON：

[{"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的值，它应该将md_id的特定值传递给另一个可以根据选择显示相应结果的服务。

md_id的选定值应传递给以下服务。

服务：

public getName(md_id){
   return this.http.get(url+'/api/names?md_id='+md_id)
   .map((resService: Response) => resService.json())
    }

组件：

 this.calendarService.getName(this.md_id).subscribe(data => this.promoName = data);

您能否帮助我知道如何将视图中绑定的一个服务的值传递给另一个服务。

我在这里错过了什么吗？

请帮忙。

Answer 1

要达到预期效果，请使用以下选项

<强> HTML：

将'项'作为runPromo（）

的参数传递

<tr *ngFor="let item of driverData">
                        <td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId" ngDefaultControl (click)="runPromo(item)">{{item.driver_name}}
                        </td>
                    </tr>

<强>组件：

向Component

的提供者添加服务

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [CalendarService]
})

将md_id分配给服务 - 组件服务调用中的CalendarService

  constructor(private calendarService: CalendarService) {

    this.runPromo = (v) =>{ 
       this.calendarService.getName(v.md_id).subscribe(data => this.promoName = data);
    this.promo1= !this.promo1;    
   }
  }

代码示例 - https://stackblitz.com/edit/angular-service-ukuoyd?file=app/app.service.ts

Answer 2

您对md_id和driverData.md_id感到困惑。

您未在任何地方设置md_id变量，只设置driverData.md_id。

完成您尝试做的事情的最佳方法是：

<td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId" ngDefaultControl (click)="runPromo(item)">{{item.driver_name}}

然后：

function promo(item) {
    this.calendarService.getName(item.md_id).subscribe(data => this.promoName = data);
}

Answer 3

只需将变量传递给mclapply方法，如下所示： click

并在(click)="runPromo(item.md_id)"

的方法正文中调用该服务

基础知识：https://angular.io/guide/user-input

Angular4：将输入值传递给服务

3 个答案: