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

Posted 2023-02-27

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

【英文标题】：ERROR TypeError: Cannot read property 'id' of undefined at tipo-struttura.component.ts (angular+spring+sql)

【发布时间】：2021-04-22 16:23:00

【问题描述】：

在我的 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>

【参考方案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`);
   

【讨论】：

是的，它有效。第一个“未定义”错误消失了。但是字符串模板在 struttura 中给了我这个错误：“找不到名称 'struttura'。你的意思是 'Struttura' 吗？”

好吧，我必须在 $this.url$"struttura" 中使用 " 周围的 struttura 进行更改

是的，在这种情况下，它是一个简单的字符串，而不是一个变量，你可以输入这样的词：$this.urlstruttura 需要添加变量时使用字符串模板即可

你能帮我解决稍后与同一项目相关的问题吗？您可以在我的 Stack 个人资料中找到它

你有链接吗？