错误类型错误：无法读取tipo-struttura.component.ts（angular+spring+sql）未定义的属性“id”

Question

在我的 Spring + Angular + MYSQL 项目中，我必须管理三个列表，其中第三个取决于第二个，第二个取决于用户在第一个中所做的选择。我正在尝试连接第一个和第二个列表，但它给了我以下错误：

错误类型错误：无法读取未定义的属性“id” 在tipo-struttura.component.ts:36

我已经使用两个列表之间的链接创建了数据库查询：

CREATE TABLE `struttura` (
  `id` bigint(20) NOT NULL,
  `struttura` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


INSERT INTO `struttura` (`id`, `struttura`) VALUES
(1, 'Strutture di elevazione verticale'),
(2, 'Strutture di elevazione orizzontale'),
(3, 'Strutture di elevazione inclinate'),
(4, 'Strutture di elevazione spaziali'),
(5, 'Aperture');


CREATE TABLE `struttura_due` (
  `id` bigint(20) NOT NULL,
  `struttura_due` varchar(255) DEFAULT NULL,
  `struttura_id_id` bigint(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;


INSERT INTO `struttura_due` (`id`, `struttura_due`, `struttura_id_id`) VALUES
(1, 'Strutture a pareti portanti in muratura', 1),
(2, 'Strutture per impalcati piani', 2),
(3, 'Strutture per coperture piane', 2),
(4, 'Strutture per coperture inclinate', 3),
(5, 'Strutture voltate', 4);

ALTER TABLE `struttura`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `struttura_due`
  ADD PRIMARY KEY (`id`),
  ADD KEY `FK9eqhylq6sc1yseu3cglwffnsy` (`struttura_id_id`);

ALTER TABLE `struttura`
  MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

ALTER TABLE `struttura_due`
  MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;

ALTER TABLE `struttura_due`
  ADD CONSTRAINT `FK9eqhylq6sc1yseu3cglwffnsy` FOREIGN KEY (`struttura_id_id`) REFERENCES `struttura` (`id`);
COMMIT;

前端 struttura.ts

export class Struttura {
    id: number
    struttura: string   
}

struttura-due.ts

import { Struttura } from "./struttura"

export class StrutturaDue {
    id: number
    struttura_due: string
    struttura_id_id: Struttura
}

elementi-struttura.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Struttura } from '../classes/strutture/struttura';
import { StrutturaDue } from '../classes/strutture/struttura-due';

@Injectable({
  providedIn: 'root'
})
export class ElementiStrutturaService {

  url: string

  constructor(private http: HttpClient) {
    this.url = 'http://localhost:8080/';
   }

   public getStruttura():Observable<Struttura[]> {
     return this.http.get<Struttura[]>(this.url + "struttura");
   }

   public getStrutturaDue():Observable<StrutturaDue[]> {
     return this.http.get<StrutturaDue[]>(this.url + "strutturaDue");
   }

  }

tipo-struttura.component.ts（第 36 行错误 -> if (t.struttura_id_id.id === this.strutt[index].id) {

import { Component, OnInit } from '@angular/core';
import { Struttura } from '../classi-servizi/classes/strutture/struttura'
import { StrutturaDue } from '../classi-servizi/classes/strutture/struttura-due'
import { ElementiStrutturaService } from '../classi-servizi/service/elementi-struttura.service';
@Component({
  selector: 'app-tipo-struttura',
  templateUrl: './tipo-struttura.component.html',
  styleUrls: ['./tipo-struttura.component.css']
})
export class TipoStrutturaComponent implements OnInit {

  strutt: Struttura[];
  strutt2: StrutturaDue[];

  selectedElement = [];
  selectedIndex: number;

  constructor(
    private service: ElementiStrutturaService
  ) { }

  ngOnInit() {
    this.service.getStruttura().subscribe(data => {
      this.strutt = data; 
      console.log(this.strutt)
    })
    this.service.getStrutturaDue().subscribe(data => {
      this.strutt2 = data;
      console.log(this.strutt2)
    })
  }
  
  onChange(index: number) {
    this.selectedElement = []
    this.strutt2.forEach(t => {
      if (t.struttura_id_id.id === this.strutt[index].id) {
        this.selectedElement.push(t)
      }
    })
    this.selectedIndex = 0;
  }

}

tipo-struttura.component.html

<div class="container">
    <div class="titolo" style="text-align: center;margin-top: 30px; font-size: 30px;">
        <p><b>INDIVIDUAZIONE DELLE STRUTTURE</b></p>
    </div>
    <div class="card my-5">
        <div class="card-body">
            <form>
                <div class="form-group">
                    <label for="struttura">
            <p><b>Struttura</b></p>
          </label>
                    <select value="structure" class="form-control" id="structure" (change)="onChange($event.target.value)" name="struttura">
            <option selected disabled>
              Seleziona
            </option>
            <option [value]="i" *ngFor="let array of strutt; index as i">
              {{ array.struttura }}
            </option>
          </select>
                    <label></label>
                    <p><b>Struttura Due</b></p>
                    <select [(ngModel)]="selectedIndex" style="margin-top: 30px;" value="struttura" valure="struttura" class="form-control" id="structure" name="struttura">
            <option selected disabled>
              Seleziona
            </option>
            <option [value]="i" *ngFor="let arrays of selectedElement; index as i;">
              {{ arrays.strutturaDue }}
            </option>
          </select>

Answer 1

解决这个问题的一个好方法是，在检查 id 是否相同之前，检查对象是否存在。

       if (t.struttura_id_id !== undefined) {
         if (t.struttura_id_id.id === this.strutt[index].id) {
           this.selectedElement.push(t)
         }
       };

这可能是因为您的数据库中有一些数据损坏。

换个话题：

在连接数据时使用模板字符串是一种很好的做法。所以，你可以在你的服务上使用它。

代替：

   public getStruttura():Observable<Struttura[]> {
     return this.http.get<Struttura[]>(this.url + "struttura");
   }

用途：

   public getStruttura():Observable<Struttura[]> {
     return this.http.get<Struttura[]>(`${this.url}${struttura}`);
   }