Question

我有一个Angular前端和Springboot后端（带有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 demo

Answer 2

您的服务为您提供了Vorgang的数组，其类型为

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

因此，如果您希望仅包含grund的数组，则可以：

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

然后遍历this.grund以填充您的选择选项。

无法将JSON条目作为数组获取

2 个答案: