Не удается получить записи JSON в виде массива

Question

У меня есть Angular Frontend и Springboot Backend (с базой данных mysql).Я хочу получить записи базы данных в виде массива, чтобы я мог отобразить их на веб-интерфейсе.Я действительно новичок в этом и мне нужна помощь.

Это записи JSON:

[{"id":1,"grund":"fehlendes Material"},
{"id":2,"grund":"gebrochenes Werkzeug"},
{"id":3,"grund":"verschlissenes Werkzeug"},
{"id":4,"grund":"defekte Maschine/Magazin"},
{"id":5,"grund":"fehlende Betriebsmittel"},
{"id":6,"grund":"fehlendes Personal"},
{"id":7,"grund":"Zeichnungsproblem"},
{"id":8,"grund":"fehlendes Programm"}]

Мне просто нужны записи "grund", я хочу перечислить их все вМеню выбора опций.

Это мой сервис, где я получаю записи json из базы данных:

  getGruendeStillstand(): Observable<Vorgang[]> {
    return this.http.get<Vorgang[]>(`${environment.baseURL}/gruende-stillstand/all`);
  }

Я вызываю это в component.ts:

export class GrundDialogComponent implements OnInit{

  grund: string;
  data: any;
  size: number = this.data.length;

  constructor(private vorgangService: VorgangService, private formBuilder: FormBuilder, public dialogRef: MatDialogRef<GrundDialogComponent>, @Inject(MAT_DIALOG_DATA) data) {
  }

  ngOnInit() {
    this.getGruendeStillstand();

  }

  getGruendeStillstand() {
    this.vorgangService.getGruendeStillstand().subscribe(res => {
      this.data = res;

      this.grund = this.data.grund;

      console.log(this.data);

    });
  }

И позже я хочу отобразить только "grund" из этой таблицы базы данных в опции выбора:

<div [formGroup]="form" class="gruende">
    <select [(ngModel)]="grund" formControlName="grund" size="{{size}}">
      <option *ngFor="let item of data" [ngValue]="item">{{item}}</option> 
    </select>
</div> 

К сожалению, я получаю только ошибку и даже не получаю сам массив(Я пытался только для целей тестирования с console.log, чтобы отобразить массив)

Answer 1

Вам необходимо использовать form, как показано ниже, и item.grund, чтобы отобразить параметры в select следующим образом.

<div class="gruende">
    <form [formGroup]="form">
        <select [(ngModel)]="grund" formControlName="grund" size="{{size}}">
           <option *ngFor="let item of data" [ngValue]="item">{{item.grund}}</option> 
        </select>
    </form>
</div>

Демонстрация StackBlitz

Answer 2

Ваш сервис предоставляет вам массив Vorgang, который имеет тип

{'id': number, 'grund': string}

Итак, если вы хотите иметь массив только grund, вы можете:

this.grund = this.data.map(vorgang => vorgang.grund);

А затем итерируйте по this.grund, чтобы заполнить ваш вариант выбора.