Question

无法解析从 Java Rest API 到角度前端的所有数据

2022-08-25

270

javascript java angular typescript rest

我从后端程序（rest API）发送了一个 MonthSheetParsed 对象列表（其中包含 Month 对象，该对象包含一组 Day 对象）。Angular 中的前端程序发送请求以获取此 MonthSheetParsed 对象列表。当我尝试显示获取的对象时，我可以显示 MonthSheetParsed 的属性。但是当我尝试获取 Month 对象中的 set<Day> （它是 MontSheetParsed 的一个属性）时，我收到了来自 TypeScript 的错误：

core.mjs:7640 ERROR TypeError: Cannot read properties of undefined (reading 'setDays').

所以我想我在 Angular 中错误地设置了我的模型，这导致它无法正确解析 Day 对象。可能是因为 Day 对象中的日期属性。但它也可能是其他东西。

我是否正确设置了模型来解析传入的数据？
如果是这样，为什么我的 Days 集未定义？

下面您可以找到 jsonData，然后是 Angular 中的模型、服务、component.html 中的 component.ts。

JsonData：

[{"id":1,"username":"[email protected]","status":"PREPOSITION","year":2022,"
month":6,"monthObject":{"year":2022,"month":6,"daysOfMonth":
[{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-01"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-02"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-03"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-04"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-05"},
{"dayType":"FEESTDAG","workingHours":8,"date":"2022-06-06"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-07"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-08"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-09"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-10"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-11"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-12"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-13"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-14"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-15"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-16"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-17"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-18"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-19"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-20"},
{"dayType":"VAKANTIE","workingHours":8,"date":"2022-06-21"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-22"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-23"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-24"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-25"},
{"dayType":"WEEKEND","workingHours":8,"date":"2022-06-26"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-27"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-28"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-29"},
{"dayType":"WERKDAG","workingHours":8,"date":"2022-06-30"}]}}]

模型 Angular - Day.ts

export class Day {
    date!:Date;
    dayType!:DayTypes;
    workingHours!:number;
}

模型 Angular - DayTypes.ts

export enum DayTypes {
    NOGNIETBEPAALD = 'NOGNIETBEPAALD',
    WERKDAG = 'WERKDAG',
    FEESTDAG = 'FEESTDAG',
    VAKANTIE = 'VAKANTIE',
    ZIEKTE = 'ZIEKTE',
    WEEKEND = 'WEEKEND',
}

模型 Angular - Month.ts

export class Month {
    year!:number;
    month!:number;
    setDays!:Set<Day>;
}

模型 Angular - Status.ts

export enum Status {
    PREPOSITION = 'Preposition',
    CONFIRMED = 'Confirmed',
    HANDLED = 'Handled',
}

模型 Angular - MonthlySheet.ts

export class MonthlySheet {
    id!:number;
    username!:string;
    status!:Status;
    year!:number;
    month!:number;
    monthobject!:Month;
}

角度服务：

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

  constructor(private http: HttpClient) { }


  getAllTimesheetsByUsername(username: String): Observable<MonthlySheet[]>{
    const url = environment.TIMESHEETSAPI_URL + "timesheets/findAllByUsername/" + `${username}`;
    return this.http.get<MonthlySheet[]>(url);
  }
}

角度组件.ts

@Component({
  selector: 'app-timesheet',
  templateUrl: './timesheet.component.html',
  styleUrls: ['./timesheet.component.css']
})
export class TimesheetComponent implements OnInit {
  timesheets!:MonthlySheet[];

  constructor(private timesheetService: TimesheetService) { }

  ngOnInit(): void {
    this.timesheetService.getAllTimesheetsByUsername(username).subscribe(sheet => {this.timesheets = sheet});
  }

}

角度组件.html

<h2>Overzicht timesheets</h2>


<ul *ngFor="let sheet of timesheets">{{sheet.username}} - {{sheet.year}}/{{sheet.month}} - {{sheet.status}}
            <li *ngFor="let daily of sheet.monthobject.setDays">{{daily.date}}-{{daily.dayType}}</li>

</ul>

Answer 1

枚举正确，将模型切换为接口：

export interface DaysOfMonth {
    dayType: DayType;
    workingHours: number;
    date: Date;
}

export interface MonthObject {
    year: number;
    month: number;
    daysOfMonth: DaysOfMonth[];
}

export interface TimeSheet {
    id: number;
    username: string;
    status: Status;
    year: number;
    month: number;
    monthObject: MonthObject;
}

Answer 2

无法读取这些属性的原因可能是由于路由模块中的泄漏，导致过滤代理服务器通过防火墙重新路由流量，解决方案很简单，您必须使用 h2 数据库 servlet 将 https 方法直接注入 spring boot 服务器，使用它您可以突破路由器模块并开始从内向外注入请求，导致路由器模块崩溃 - 一旦系统变量溢出它就会崩溃，从那里您可以找到路由加密密钥，因为它们将以解密形式显示。完成后，它将能够再次读取日期。

Answer 3

export class Month {
    year!:number;
    month!:number;
    setDays!:Day[]; // Set<Day>;
}

数组无法直接分配给 Set，可以将其创建为

setDay: Set<Day> = new Set([...Day]);

您需要在模型中有 Day[]。