将字典传递给更改事件的角度

问题描述

我正在尝试将字典传递给类似这样的函数：

<ng-template class="example-container" ngSwitchCase="twoTextFields">
      <mat-form-field appearance="outline">
          <mat-label>{{field.firstFieldName}}</mat-label>
          <input matInput (change)="onUpdate(field.db_name,{[field.first_db_name]: $event})">
      </mat-form-field>
      <mat-form-field appearance="outline">
          <mat-label>{{field.secondFieldName}}</mat-label>
          <input matInput (change)="onUpdate(field.db_name,{[field.second_db_name]: $event})">
      </mat-form-field>
</ng-template>

它给了我很多与此类似的语法错误：

Parser Error: Missing expected ) at column 26 in [onUpdate(field.db_name,{[field.first_db_name]: $event})] in @14:43 ("         <mat-label>{{field.firstFieldName}}</mat-label>
          <input matInput (change)="[ERROR ->]onUpdate(field.db_name,{[field.first_db_name]: $event})">
      </mat-form-field>
      <mat-form-f"): @14:43

是否可以像上面那样通过字典？如果可以的话，我对如何实现有一些指导，否则，如果无法实现，这也将有所帮助！我是Angular的新手，所以对您有帮助！

我正在尝试翻译我从React那里获得的一些代码，如果我不必重写change函数，那将更加简单。我也尝试使用ngModelChange，但收到相同的错误。

谢谢！

解决方法

不幸的是，这会触发语法错误。主要原因是“ []”在角度指令/模板中用作特殊字符。

您可以改为：

<mat-form-field appearance="outline">
    <mat-label>{{field.firstFieldName}}</mat-label>
    <input matInput (change)="onUpdate(field.db_name,convertToDict(field.first_db_name,$event))">
</mat-form-field>
<mat-form-field appearance="outline">
    <mat-label>{{field.secondFieldName}}</mat-label>
    <input matInput (change)="onUpdate(field.db_name,convertToDict(field.second_db_name,$event))">
</mat-form-field>

然后在您的代码后面，您可以像在app.component.ts中那样创建辅助函数：

export class AppComponent  {
  ... truncated code . ..

  convertToDict(key: any,value: any): any {
    return {[key]: value}
  }

  onUpdate(fieldName: string,eventDict: any) {
    console.log(fieldName);
    console.log(eventDict);
  }

  ... truncated code ...
}

如果您仍然希望拥有数据字典，这是一种解决方法。我们通过使用一个简单的帮助器/转换器函数来做到这一点。