Angular项目TS1312错误咨询：RESOLUTION属性赋值语法问题

问题描述 #

我需要将以下MET数据在HTML页面中展示：

MET:[
 {
    LABEL:"WILHELMSEN HLD ASA",
    ISINCODE:"NO0010571698",
    RECORD_DATE:"2022-09-16",
    EVENT_DATE:"2022-09-30",
    EVENT_TYPE:"AG Ordinaire",
    SOLDE:15000.00,
    NUMERO_AG:10642,
    CREAT_DATE:"2022-04-01",
    MOD_DATE:"2022-04-01",
    EMETTEUR:"408659",
    DEPOSITAIRE:"CA000005775300",
    ISCONFIRMED:1,
    ISSRD2ELIGIBLE:1,
    ADRESSE1:"Strandveien 20",
    ADRESSE2:"",
    LOCALITE:"LYSAKER",
    CODEPOSTAL:0,
    PAYS:"NOR",
    STATUTAG:9,
    URL:"",
    RESOLUTION:[
     {
       REF:"01",
     },
    ]
 }
],

目前已实现MET数据的HTML渲染，但在todo.service.ts中定义嵌套的RESOLUTION数组时，出现TS1312错误，错误信息如下：

src/app/todo/todo.service.ts:31:20 - error TS1312: Did you mean to use a ':'? An '=' can only follow a property name when the containing object literal is part of a destructuring pattern.

31         RESOLUTION = [

相关代码如下：

todo.service.ts #

export class TodoService {
  MET = [
    {
      LABEL: "WILHELMSEN",
      ISINCODE: "NO0010571698",
      RECORD_DATE: "2022-09-16",
      EVENT_DATE: "2022-09-30",
      EVENT_TYPE: "AG Ordinaire",
      SOLDE: 15000.0,
      NUMERO_AG: 10642,
      CREAT_DATE: "2022-04-01",
      MOD_DATE: "2022-04-01",
      EMETTEUR: "408659",
      DEPOSITAIRE: "CA000005775300",
      ISCONFIRMED: 1,
      ISSRD2ELIGIBLE: 1,
      ADRESSE1: "Strand 20",
      ADRESSE2: "",
      LOCALITE: "LYS",
      CODEPOSTAL: 0,
      PAYS: "NOR",
      STATUTAG: 9,
      URL: "",

      RESOLUTION = [
        {
          REF: "01",
        },
      ],
    },
  ];

  constructor() {}
}

todo.component.ts #

export class TodoComponent implements OnInit {
  MET: any;

  constructor(private todoService: TodoService) {}

  ngOnInit() {
    this.MET = this.todoService.MET;
  }
}

todo.html #

<div class="container text-center" *ngIf="MET">
   <h2 class="pt-3 pb-3">HTML Table</h2>
   <table class="mb-5">
      <tr>
         <th>Isin</th>
         <th>Dénomination</th>
         <th>Date de création</th>
         <th>Date de modification</th>
         <th>Code d'identification</th>
         <th>Status</th>
         <th>Réference du dépositaire</th>
         <th>Confirmé</th>
         <th>Eligible à SRD2</th>
         <th>Lieu de l'événement</th>
      </tr>
      <tr *ngFor="let line of MET">
         <td>{{ line.ISINCODE }} </td>
         <td>{{ line.LABEL }} </td>
         <td>{{ line.CREAT_DATE }} </td>
         <td>{{ line.MOD_DATE }} </td>
         <td>{{ line.EMETTEUR}} </td>
         <td>{{ line.STATUTAG }} </td>
         <td>{{ line.DEPOSITAIRE }} </td>
         <td>{{ line.ISCONFIRMED }} </td>
         <td>{{ line.ISSRD2ELIGIBLE }} </td>
         <td>{{ line.ADRESSE1 }} {{ line.LOCALITE}} </td>
      </tr>
   </table>
</div>

请问该错误的原因是什么？如何解决？

错误原因 #

在TypeScript/JavaScript的对象字面量中，属性与对应值之间必须用冒号:分隔，你在定义RESOLUTION属性时错误使用了等号=。等号=仅能在解构赋值场景下跟在属性名后，常规对象字面量不允许这种写法，因此触发TS1312错误。

解决方法 #

将RESOLUTION = [修改为RESOLUTION: [，也就是把属性赋值的等号替换为冒号即可。修改后的todo.service.ts代码如下：

export class TodoService {
  MET = [
    {
      LABEL: "WILHELMSEN",
      ISINCODE: "NO0010571698",
      RECORD_DATE: "2022-09-16",
      EVENT_DATE: "2022-09-30",
      EVENT_TYPE: "AG Ordinaire",
      SOLDE: 15000.0,
      NUMERO_AG: 10642,
      CREAT_DATE: "2022-04-01",
      MOD_DATE: "2022-04-01",
      EMETTEUR: "408659",
      DEPOSITAIRE: "CA000005775300",
      ISCONFIRMED: 1,
      ISSRD2ELIGIBLE: 1,
      ADRESSE1: "Strand 20",
      ADRESSE2: "",
      LOCALITE: "LYS",
      CODEPOSTAL: 0,
      PAYS: "NOR",
      STATUTAG: 9,
      URL: "",

      // 替换=为:
      RESOLUTION: [
        {
          REF: "01",
        },
      ],
    },
  ];

  constructor() {}
}

内容的提问来源于stack exchange，提问作者pops1348