Question

我是Angular的新手，我通常在Javascript js文件中我可以执行put动作来改变bootstrap开关的实际状态，如：

$.ajax({
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + token
    },
    url: "http://myapi/api/usuarios/activar",
    data: JSON.stringify(data),
    success: function(data) {
    },
    error: function(e) {
    }
  });

但现在我实施了Angular Bootstrap switch，我的component.html看起来像这样：

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

你可以看到它有(statusChange)="onFlagChange($event)，它应该如何在组件中创建该事件，我知道我应该在服务中做类似这样的方法：

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

然后如何将其调用到component.ts并在事件句柄中执行？此致

Answer 1

onFlagChange($event)是指您在component.ts文件中定义的函数，如下所示：

onFlagChange(event) {
  this.yourServiceName.postSwitch().subscribe(() => {
    //React to your HTTP request success
  }, (err) => {
    //React to your HTTP request error
  });
}

您的服务模板：

@Injectable()
export class YourService {
  constructor(private http: HttpClient) { }
  //Your service functions
}

更改自举开关的调用事件

1 个答案: