Angular 5向数组push对象时报错：Unexpected token语法错误

这个错误的核心原因很明确：你把this.test.push(...)的执行代码直接放在了类的顶层，而TypeScript类的顶层只允许定义属性、方法、构造函数或访问器，不能直接写可执行语句。

错误写法示例 #

你之前的代码大概是这样的（问题出在push语句的位置）：

export class ModelFormComponent {
  // 你的模拟数组定义
  test: any[] = [
    { "cat_id": "1", "cat_name": "One", "cat_type": "One", "displayOrder": 1, "columns": [{ "category": "One", "name": "one" }] },
    { "cat_id": "2", "cat_name": "SECURITY", "cat_type": "security", "displayOrder": 2, "columns": [{ "category": "Two", "name": "two" }] },
    { "cat_id": "3", "cat_name": "COLLOBORATION", "cat_type": "colloboration", "displayOrder": 3, "columns": [{ "category": "Three", "name": "three" }] },
    { "cat_id": "4", "cat_name": "NEW ARCHITECTURE", "cat_type": "newarch", "displayOrder": 4, "columns": [{ "category": "Four", "name": "four" }] }
  ];

  // ❌ 错误：直接在这里执行push，不属于类允许的顶层元素
  this.test.push({ 'cat_name': 'fdas', 'cat_type': 'fsda' });
}

修正方案 #

把push操作放到类的构造函数、组件生命周期钩子（比如Angular的ngOnInit）或者自定义方法里，比如：

import { Component, OnInit } from '@angular/core';

export class ModelFormComponent implements OnInit {
  test: any[] = [
    { "cat_id": "1", "cat_name": "One", "cat_type": "One", "displayOrder": 1, "columns": [{ "category": "One", "name": "one" }] },
    { "cat_id": "2", "cat_name": "SECURITY", "cat_type": "security", "displayOrder": 2, "columns": [{ "category": "Two", "name": "two" }] },
    { "cat_id": "3", "cat_name": "COLLOBORATION", "cat_type": "colloboration", "displayOrder": 3, "columns": [{ "category": "Three", "name": "three" }] },
    { "cat_id": "4", "cat_name": "NEW ARCHITECTURE", "cat_type": "newarch", "displayOrder": 4, "columns": [{ "category": "Four", "name": "four" }] }
  ];

  constructor() {
    // 方案1：在构造函数中执行push
    this.test.push({ 'cat_name': 'fdas', 'cat_type': 'fsda' });
  }

  ngOnInit(): void {
    // 方案2：在组件初始化钩子中执行（更推荐，适合Angular组件的初始化逻辑）
    // this.test.push({ 'cat_name': 'fdas', 'cat_type': 'fsda' });
  }

  // 方案3：封装成自定义方法，按需调用（比如按钮点击事件触发）
  addNewCategory() {
    this.test.push({ 'cat_name': 'fdas', 'cat_type': 'fsda' });
  }
}

补充说明 #

• 如果你是在用户交互（比如按钮点击）时添加新元素，直接调用自定义的addNewCategory方法即可，这样更符合组件逻辑的分离原则。
• 你push的对象语法是完全合法的，TypeScript允许用单引号或双引号包裹对象键名，这不是错误的诱因。

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