Angular 6: как добавить строку JSON в существующий массив строк JSON?

Question

Итак, у меня есть компонент Typescript с конструктором, который выглядит следующим образом:

constructor(private http: HttpClient) {
    this.http.get('/api/values/users').subscribe(result => {
      this.values = result as string[];
    }, error => console.error(error));
  }

, и, как вы можете видеть, он создает массив строк и сохраняет его в значениях.Позже я отображаю эту строку [] в html с чем-то вроде этого фрагмента

<tr *ngFor="let value of values; index as i">
      <td>
        <input [(ngModel)]="value.id" class="form-control" type="text" name="{{value.id}}" />
      </td>
</tr>

, проблема в том, что позже я хочу добавить новый элемент в массив строк в формате JSON.Но когда я пишу

this.values.push("{id: 1, username: , firstName: , lastName: , token: ,}");

Это не соответствует формату JSON, и строка становится такой:

0: {id: 2, name: "provider", password: "gps", roles: 4, status: 1}
1: {id: 4, name: "Josh", password: "pass", roles: 1, status: 1}
2: {id: 5, name: "admin", password: "admin", roles: 1, status: 1}
3: "{id: 1, username: , firstName: , lastName: , token: ,}"

, обратите внимание, что последнее значение имеет двойные кавычки вокруг него.Это делает так, что * ngFor, который был упомянут выше, не воспринимает его как формат JSON и просто думает, что четвертый объект здесь - просто обычная строка.Пожалуйста, помогите мне!

Answer 1

вы должны сделать Object.assign ().Это ПРИМЕР, который объединяет ваш объект возвращаемых значений с вашим новым объектом, на котором есть новый элемент.

this.values= Object.assign({},this.values,{newElementFieldName: this.newObject});

Answer 2

В строке JSON формат пропущенных кавычек.Попробуйте следующий синтаксис:

this.values.push(JSON.parse('{"id": "1", "username": null, 
"firstName": null, "lastName": null, "token": ","}'))