Angular 将字典传递给更改事件

Question

我正在尝试将字典传递给函数，如下所示：

<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，但我收到了同样的错误。

谢谢！

Answer 1

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

您可以这样做：

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

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

Angular 将字典传递给更改事件

Angular passing a dictionary into a change event

javascript

typescript

angular-template

angular