Angular 将component.html的插值值调用到component.ts

我是角度方面的新手，我有一个材质表，其中有如下字段：

<mat-header-cell *matHeaderCellDef mat-sort-header> Id </mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.id}} 
</mat-cell>

<mat-cell *matCellDef="let user">
      <switch [status]="user.activo" [onText]="yes" [offText]="no" [onColor]="green" [offColor]="gray" [size]="normal" [disabled]="disabled" (statusChange)="onFlagChange($event)"></switch>
 </mat-cell>

So/I创建一个服务来更改当前用户的状态，如：

postSwitch(body) {
var cambioEstatus = this.http
  .put(
    this.rootUrl + "api/usuarios/activar",
    JSON.stringify(body),
    this.options
  )
  .map((data: any) => data.json());
return cambioEstatus;
 }

我用来填充表格的方法是：

 getUser(): Observable<User[]> {
    return this.httpClient.get<User[]>(this.serviceUrl, {
      headers: this.headersNew
    });
  }

如你所见，我有

const body: any = {
      usuarioId: ,
      activo: event
    };

但是我不知道如何从视图中获取

{{user.id}

。我怎样才能做到这一点？问候

完整组件。ts：

import {
  Component,
  Input,
  OnInit,
  ViewEncapsulation,
  ViewChild,
  ElementRef
} from "@angular/core";
import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { ScriptLoaderService } from "../../../../../_services/script-loader.service";
import { ToastrService } from "ngx-toastr";

import { UsuariosService } from "../../../../../_services/usuarios.service";
import { Observable } from "rxjs/Observable";
import {
  DataSource,
  CollectionViewer,
  SelectionModel
} from "@angular/cdk/collections";
// import { User } from "../../../../../_models/user.model";5
import { BehaviorSubject } from "rxjs";
import {
  MatSort,
  MatSortable,
  MatTableDataSource,
  MatPaginator,
  MatPaginatorIntl
} from "@angular/material";
import { UsuarioActivo } from "../../../../../_models/usuarioActivo";


@Component({
  selector: "usuarios",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})
export class UsuariosComponent {
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild("filter") filter: ElementRef;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  // Bootstrap switch
  public yes: string = "SI";
  public no: string = "NO";
  public green: string = "green";
  public gray: string = "gray";
  public disabled: boolean = false;
  public status: boolean = false;
  public normal: string = "small";
  //end Bootstrap switch

  selection = new SelectionModel<string>(true, []);
  dataSource;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  displayedColumns = [
    "id",
    "nombre",
    "apellido",
    "email",
    "perfil",
    "ultimoLogin",
    "activo",
    "action"
  ];

  constructor(
    private _script: ScriptLoaderService,
    private toastr: ToastrService,
    private UsuariosService: UsuariosService
  ) {}

  ngOnInit() {
    this.UsuariosService.getUser().subscribe(results => {
      if (!results) {
        return;
      }
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    });


  }

  onFlagChange(event, userid) {
    const body: any = {
      usuarioId: userid,
      activo: event
    };
    this.UsuariosService.postSwitch(body).subscribe(
      () => {
        //React to your HTTP request success
        this.toastr.success("Cambiado con éxito");
      },
      err => {
        this.toastr.error("Falló");
        //React to your HTTP request error
      }
    );
  }

}

导入{
组成部分，
输入，
奥尼特，
视图封装，
ViewChild，
ElementRef
}从“@角度/核心”；
从“@ng bootstrap/ng bootstrap”导入{ModalDismissReasons，NgbDateStruct}”；
从“../../../../../../../../\u服务/script loader.service”导入{ScriptLoaderService}”；
从“ngx-toastr”导入{ToastrService}；
从“../../../../../../../../\u services/usuaris.service”导入{usuarisservice}”；
从“rxjs/Observable”导入{Observable}；
进口{
数据源，
CollectionViewer，
选择模型
}来自“@angular/cdk/collections”；
//从“../../../../../../../../../\u models/User.model”导入{User}”；5.
从“rxjs”导入{BehaviorSubject}；
进口{
马索尔，
MatSortable，
MatTableDataSource，
MatPaginator，
MatPaginatorIntl
}从“@角度/材料”；
从“../../../../../../../../\u models/UsuarioActivo”导入{UsuarioActivo}”；
@组成部分({
选择器：“usuarios”，
templateUrl:“./usuarios.component.html”，
封装：视图封装。无
})
导出类UsuariosComponent{
@ViewChild（MatSort）排序：MatSort；
@ViewChild（“过滤器”）过滤器：ElementRef；
@ViewChild（MatPaginator）分页器：MatPaginator；
//自举开关
公共是：string=“SI”；
公共编号：string=“否”；
公共绿色：string=“绿色”；
公共灰色：string=“灰色”；
公共禁用：布尔值=false；
公共状态：boolean=false；
公共正常值：string=“small”；
//端引导开关
selection=新SelectionModel（true，[]）；
数据源；
applyFilter（filterValue:string）{
filterValue=filterValue.trim（）；//删除空白
filterValue=filterValue.toLowerCase（）；//MatTableDataSource默认为小写匹配
this.dataSource.filter=filterValue；
}
displayedColumns=[
“身份证”，
“名义”，
“阿佩利多”，
“电子邮件”，
“perfil”，
“终极莫洛金”，
“activo”，
“行动”
];
建造师(
私有脚本：ScriptLoaderService，
私人toastr:ToastrService，
专用UsuariosService:UsuariosService
) {}
恩戈尼尼特（）{
this.UsuariosService.getUser（）.subscribe（结果=>{
如果（！结果）{
返回；
}
this.dataSource=新MatTableDataSource（结果）；
this.dataSource.sort=this.sort；
this.dataSource.paginator=this.paginator；
});
}
onFlagChange（事件，用户ID）{
常量正文：任意={
usuarioId:userid，
活动：事件
};
this.usuarisservice.postSwitch（body.subscribe）(
() => {
//成功响应HTTP请求
这是一次成功（“Cambiado conéxito”）；
},
错误=>{
这是一个错误（“Falló”）；
//对HTTP请求错误作出反应
}
);
}
}

记住，模板上下文中有

用户

<mat-cell *matCellDef="let user"> <switch [status]="user.activo" [onText]="yes" [offText]="no" [onColor]="green" [offColor]="gray" [size]="normal" [disabled]="disabled" (statusChange)="onFlagChange($event, user)"></switch> </mat-cell>



在这种情况下，您可以向
onFlagChange（）
函数添加第二个参数，并接收当前用户。
它可以工作，很抱歉，我学习这个框架和结构有时对我来说很困难。顺便谢谢你！不用担心@Pepe，当你想学习的时候，没有无知，这是网站的宗旨，很高兴知道这是一个工人。
import {
  Component,
  Input,
  OnInit,
  ViewEncapsulation,
  ViewChild,
  ElementRef
} from "@angular/core";
import { ModalDismissReasons, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
import { ScriptLoaderService } from "../../../../../_services/script-loader.service";
import { ToastrService } from "ngx-toastr";

import { UsuariosService } from "../../../../../_services/usuarios.service";
import { Observable } from "rxjs/Observable";
import {
  DataSource,
  CollectionViewer,
  SelectionModel
} from "@angular/cdk/collections";
// import { User } from "../../../../../_models/user.model";5
import { BehaviorSubject } from "rxjs";
import {
  MatSort,
  MatSortable,
  MatTableDataSource,
  MatPaginator,
  MatPaginatorIntl
} from "@angular/material";
import { UsuarioActivo } from "../../../../../_models/usuarioActivo";


@Component({
  selector: "usuarios",
  templateUrl: "./usuarios.component.html",
  encapsulation: ViewEncapsulation.None
})
export class UsuariosComponent {
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild("filter") filter: ElementRef;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  // Bootstrap switch
  public yes: string = "SI";
  public no: string = "NO";
  public green: string = "green";
  public gray: string = "gray";
  public disabled: boolean = false;
  public status: boolean = false;
  public normal: string = "small";
  //end Bootstrap switch

  selection = new SelectionModel<string>(true, []);
  dataSource;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  displayedColumns = [
    "id",
    "nombre",
    "apellido",
    "email",
    "perfil",
    "ultimoLogin",
    "activo",
    "action"
  ];

  constructor(
    private _script: ScriptLoaderService,
    private toastr: ToastrService,
    private UsuariosService: UsuariosService
  ) {}

  ngOnInit() {
    this.UsuariosService.getUser().subscribe(results => {
      if (!results) {
        return;
      }
      this.dataSource = new MatTableDataSource(results);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;

    });


  }

  onFlagChange(event, userid) {
    const body: any = {
      usuarioId: userid,
      activo: event
    };
    this.UsuariosService.postSwitch(body).subscribe(
      () => {
        //React to your HTTP request success
        this.toastr.success("Cambiado con éxito");
      },
      err => {
        this.toastr.error("Falló");
        //React to your HTTP request error
      }
    );
  }

}

<mat-cell *matCellDef="let user"> <switch [status]="user.activo" [onText]="yes" [offText]="no" [onColor]="green" [offColor]="gray" [size]="normal" [disabled]="disabled" (statusChange)="onFlagChange($event, user)"></switch> </mat-cell>