意外的标记。构造函数、方法、访问器或属性应为角度 5答案

【问题标题】：Unexpected token. A constructor, method, accessor, or property was expected angular 5意外的标记。构造函数、方法、访问器或属性应为角度 5
【发布时间】：2018-07-07 02:16:13
【问题描述】：

我试图将对象推入我的数组，但它显示错误

意外的令牌。需要构造函数、方法、访问器或属性

在Model-form.component.ts 文件中，我创建了虚拟 json 数组进行测试。

json 数组：

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"
        }]
    }
];

我已经尝试将对象推送到下面代码给出的测试数组中

this.test.push({
    'cat_name': 'fdas',
    'cat_type': 'fsda'
});

但它显示错误。 Code URL

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

类型脚本不接受类中的顶级表达式。

请移动

this.test.push({
    'cat_name': 'fdas',
    'cat_type': 'fsda'
});

到函数内部并运行函数。

【讨论】：

是的，当我从类更改为内部函数时，它正在工作。它就像一个魅力
我需要另外澄清一下，是否可以更新 json 数组，其中 cat_id": "4"。请帮我 praveen
@ramu，很高兴看到它正在工作，你可以尝试这样的事情，var checkId = this.test.findIndex(el => el.cat_id === "4");其中 checkId 是 this.test 数组中对象的索引 where cat_id === "4" 现在您可以使用 checkId、this.test[checkId].push 或 this.test[checkId] = {//update 更新代码你的对象在这里}。

【解决方案2】：

看看这个：

export class ModelFormComponent implements OnInit {
 langs: string[] = [
    'English',
    'French',
    'German',
    'Chinese',
    'Vietnamese',
  ];

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"
}
]
}
];




this.test.push({
    'cat_name': 'fdas',
    'cat_type': 'fsda'
});

您不能在 Angular 5 中推送到类内部的数组，类只是属性的表示。

为了让这个工作你必须选择：

1)：在组件范围内的方法中使用它：

ngOnInit() {
    this.myform = new FormGroup({
      name: new FormGroup({
        firstName: new FormControl('', Validators.required),
        lastName: new FormControl('', Validators.required),
      }),
      email: new FormControl('', [
        Validators.required,
        Validators.pattern("[^ @]*@[^ @]*")
      ]),
      password: new FormControl('', [
        Validators.required,
        Validators.minLength(8)
      ]),
      language: new FormControl()
    });
        this.test.push({
    'cat_name': 'fdas',
    'cat_type': 'fsda'
});

}

2)：将其用作导入的类，并将项目推送到数组中：

    import { Component, OnInit,NgModule, Pipe } from '@angular/core';
    import { myClass } from './models/myClass';
    import {ReactiveFormsModule,
        FormsModule,
        FormGroup,
        FormControl,
        Validators,
        FormBuilder} from '@angular/forms';

    @Component({
      selector: 'model-form',
      templateUrl: './model-form.component.html',
      styleUrls: ['./model-form.component.css']
    })
    export class ModelFormComponent implements OnInit {
   constructor(private MyClass: myClass) {
}

  ngOnInit() { 
    this.MyClass.test.push({
    'cat_name': 'fdas',
    'cat_type': 'fsda'
});
}

【讨论】：