我在使用 Typescript 属性初始化时遇到问题
[英]I am having problems with Typescript property initialization
问题描述
所以我正在制作一个 Spring 和 Angular web 应用程序，并且我在浏览器检查模式下出现问题，例如： ERROR TypeError: Cannot read properties of undefined (reading 'name').
我怀疑问题在于属性初始化。 （这是 app.component.ts）
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
[x: string]: any;
public employees!: Employee[];
public editEmployee!: Employee;
public deleteEmployee!: Employee;
我的整个项目没有任何运行时错误，但应用程序运行不正常。 因为它是一个员工经理应用程序，它有一个更新删除和添加 function，更新根本不起作用，添加也不能正常工作。
这是我的 app.component.html：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" style="color:white;">Employee Manager</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" (click)="onOpenModal(null!, 'add')">Add Employee <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input type="search" (ngModelChange)="searchEmployees(key.value)" #key="ngModel" ngModel
name="key" id="searchName" class="form-control mr-sm-2" placeholder="Search employees..." required>
</form>
</div>
</nav>
<div class="container" id="main-container">
<div class="row">
<div *ngFor="let employee of employees" class="col-md-6 col-xl-3">
<div class="card m-b-30">
<div class="card-body row">
<div class="col-6">
<a href=""><img src="{{employee?.imageUrl}}" alt="" class="img-fluid rounded-circle w-60"></a>
</div>
<div class="col-6 card-title align-self-center mb-0">
<h5>{{employee?.name}}</h5>
<p class="m-0">{{employee?.jobTitle}}</p>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fa fa-envelope float-right"></i>{{employee?.email}}</li>
<li class="list-group-item"><i class="fa fa-phone float-right"></i>Phone : {{employee?.phone}}</li>
</ul>
<div class="card-body">
<div class="float-right btn-group btn-group-sm">
<a (click)="onOpenModal(employee, 'edit')" class="btn btn-primary tooltips" data-placement="top" data-original-title="Edit"><i class="fa fa-pencil"></i> </a>
<a (click)="onOpenModal(employee, 'delete')" class="btn btn-secondary tooltips" data-placement="top" data-original-title="Delete"><i class="fa fa-times"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Add Employee Modal -->
<div class="modal fade" id="addEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="addEmployeeModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEmployeeModalLabel">Add Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #addForm="ngForm" (ngSubmit)="onAddEmployee(addForm)">
<div class="form-group">
<label for="name">Name</label>
<input type="text" ngModel name="name" class="form-control" id="name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" ngModel name="email" class="form-control" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="phone">Job title</label>
<input type="text" ngModel name="jobTitle" class="form-control" id="jobTile" placeholder="Job title" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" ngModel name="phone" class="form-control" id="phone" placeholder="Phone" required>
</div>
<div class="form-group">
<label for="phone">Image URL</label>
<input type="text" ngModel name="imageUrl" class="form-control" id="imageUrl" placeholder="Image URL" required>
</div>
<div class="modal-footer">
<button type="button" id="add-employee-form" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button [disabled]="addForm.invalid" type="submit" class="btn btn-primary" >Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Edit Modal -->
<div class="modal fade" id="updateEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="employeeEditModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateEmployeeModalLabel">Edit Employee {{editEmployee.name}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #editForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input type="text" ngModel="{{editEmployee.name}}" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Name">
</div>
<input type="hidden" ngModel="{{editEmployee.id}}" name="id" class="form-control" id="id" placeholder="Email">
<input type="hidden" ngModel="{{editEmployee.employeeCode}}" name="userCode" class="form-control" id="userCode" placeholder="Email">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" ngModel="{{editEmployee.email}}" name="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label for="phone">Job title</label>
<input type="text" ngModel="{{editEmployee.jobTitle}}" name="jobTitle" class="form-control" id="jobTitle" placeholder="Job title">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" ngModel="{{editEmployee.phone}}" name="phone" class="form-control" id="phone" name="phone" placeholder="Phone">
</div>
<div class="form-group">
<label for="phone">Image URL</label>
<input type="text" ngModel="{{editEmployee.imageUrl}}" name="imageUrl" class="form-control" id="imageUrl" placeholder="Image URL">
</div>
<div class="modal-footer">
<button type="button" id="" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button (click)="onUpdateEmployee(editForm.value)" data-dismiss="modal" class="btn btn-primary" >Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Delete Modal -->
<div class="modal fade" id="deleteEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="deleteModelLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModelLabel">Delete Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure you want to delete employee {{deleteEmployee.name}}?</p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button (click)="onDeleteEmployee(deleteEmployee.id)" class="btn btn-danger" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Notification for no employees -->
<div *ngIf="employees?.length == 0" class="col-lg-12 col-md-12 col-xl-12">
<div class="alert alert-info" role="alert">
<h4 class="alert-heading">NO EMPLOYEES!</h4>
<p>No Employees were found.</p>
</div>
</div>
有没有人知道如何解决属性初始化问题（如果有的话）。 我是否可以降级 Angular 版本，我已经尝试将 StrictPropertyInitalization 设置为 false，但它没有多大作用。 提前致谢！
编辑：显示这一点的课程不必在属性初始化中添加“，”。 他们的应用程序运行良好。 所以我怀疑这一点。
1 个解决方案
解决方案1
0 2022-08-15 18:07:40
这是由您尝试从中读取属性的 object 引起的。在呈现模板时，名称尚未初始化。
我已经重新创建了类似于您的项目的东西，并设法在模板上使用 object 之前使用 *ngIf 来消除错误。
检查我在本地做了什么，以防它帮助你：
app.component.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" style="color:white;">Employee Manager</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" (click)="onOpenModal(null!, 'add')">Add Employee <span class="sr-only">(current)</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input type="search" (ngModelChange)="searchEmployees(key.value)" #key="ngModel" ngModel name="key" id="searchName" class="form-control mr-sm-2" placeholder="Search employees..." required>
</form>
</div>
</nav>
<div class="container" id="main-container">
<div class="row">
<div *ngFor="let employee of employees" class="col-md-6 col-xl-3">
<div class="card m-b-30">
<div class="card-body row">
<div class="col-6">
<a href=""><img src="{{employee?.imageUrl}}" alt="" class="img-fluid rounded-circle w-60"></a>
</div>
<div class="col-6 card-title align-self-center mb-0">
<h5>{{employee?.name}}</h5>
<p class="m-0">{{employee?.jobTitle}}</p>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fa fa-envelope float-right"></i>{{employee?.email}}</li>
<li class="list-group-item"><i class="fa fa-phone float-right"></i>Phone : {{employee?.phone}}</li>
</ul>
<div class="card-body">
<div class="float-right btn-group btn-group-sm">
<a (click)="onOpenModal(employee, 'edit')" class="btn btn-primary tooltips" data-placement="top" data-original-title="Edit"><i class="fa fa-pencil"></i> </a>
<a (click)="onOpenModal(employee, 'delete')" class="btn btn-secondary tooltips" data-placement="top" data-original-title="Delete"><i class="fa fa-times"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- Add Employee Modal -->
<div class="modal fade" id="addEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="addEmployeeModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEmployeeModalLabel">Add Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #addForm="ngForm" (ngSubmit)="onAddEmployee(addForm)" *ngIf="editEmployee">
<div class="form-group">
<label for="name">Name</label>
<input type="text" [(ngModel)]="editEmployee.name" name="name" class="form-control" id="name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" [(ngModel)]="editEmployee.email" name="email" class="form-control" id="email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="phone">Job title</label>
<input type="text" [(ngModel)]="editEmployee.jobTitle" name="jobTitle" class="form-control" id="jobTile" placeholder="Job title" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" [(ngModel)]="editEmployee.phone" name="phone" class="form-control" id="phone" placeholder="Phone" required>
</div>
<div class="form-group">
<label for="phone">Image URL</label>
<input type="text" [(ngModel)]="editEmployee.imageUrl" name="imageUrl" class="form-control" id="imageUrl" placeholder="Image URL" required>
</div>
<div class="modal-footer">
<button type="button" id="add-employee-form" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button [disabled]="addForm.invalid" type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Edit Modal -->
<div class="modal fade" id="updateEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="employeeEditModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="updateEmployeeModalLabel">Edit Employee <span *ngIf="editEmployee">{{editEmployee.name}}</span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form #editForm="ngForm" *ngIf="editEmployee">
<div class="form-group">
<label for="name">Name</label>
<input type="text" [(ngModel)]="editEmployee.name" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Name">
</div>
<input type="hidden" [(ngModel)]="editEmployee.id" name="id" class="form-control" id="id" placeholder="Email">
<input type="hidden" ngModel="editEmployee.employeeCode" name="userCode" class="form-control" id="userCode" placeholder="Email">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" [(ngModel)]="editEmployee.email" name="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label for="phone">Job title</label>
<input type="text" [(ngModel)]="editEmployee.jobTitle" name="jobTitle" class="form-control" id="jobTitle" placeholder="Job title">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" [(ngModel)]="editEmployee.phone" name="phone" class="form-control" id="phone" name="phone" placeholder="Phone">
</div>
<div class="form-group">
<label for="phone">Image URL</label>
<input type="text" [(ngModel)]="editEmployee.imageUrl" name="imageUrl" class="form-control" id="imageUrl" placeholder="Image URL">
</div>
<div class="modal-footer">
<button type="button" id="" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button (click)="onUpdateEmployee(editForm.value)" data-dismiss="modal" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Delete Modal -->
<div class="modal fade" id="deleteEmployeeModal" tabindex="-1" role="dialog" aria-labelledby="deleteModelLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModelLabel">Delete Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" *ngIf="deleteEmployee">
<p>Are you sure you want to delete employee {{deleteEmployee.name}}?</p>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button (click)="onDeleteEmployee(deleteEmployee.id)" class="btn btn-danger" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Notification for no employees -->
<div *ngIf="employees?.length == 0" class="col-lg-12 col-md-12 col-xl-12">
<div class="alert alert-info" role="alert">
<h4 class="alert-heading">NO EMPLOYEES!</h4>
<p>No Employees were found.</p>
</div>
</div>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'conSpring';
employees: Array<Employee> = [];
editEmployee!: Employee;
deleteEmployee!: Employee;
public onOpenModal(a: any, b: string): void {
}
public onAddEmployee(a: any): void {
}
public searchEmployees(a: any): void {
}
public onUpdateEmployee(a: any): void {
}
public onDeleteEmployee(a: any): void {
}
}
export class Employee {
id!: number;
employeeCode!: string;
name!: string;
jobTitle!: string;
email!: string;
phone!: string;
imageUrl!: string;
}
app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
当然，对我来说，它显示了一些不可用的东西，因为我错过了来自后端的数据和获取它的连接，你应该拥有（我相信）。
为什么我在这个验证器上有“无法读取未定义的属性‘http’”？
[英]Why am i having “Cannot read property 'http' of undefined” on this validator?
我在导入材料表格字段模块时遇到问题。 我正在了解如何解决这个问题？
[英]I am having problems importing Material Form Field Module. I am getting How do I solve this?
错误：初始化错误（打字稿）。无法读取未定义的属性'getExecutingFilePath'
[英]Error:Initialization error (typescript). Cannot read property 'getExecutingFilePath' of undefined
我应该如何将日期时间 json 字符串属性 map 转换为 TypeScript 日期类型？
[英]How am I supposed to map a datetime json string property into the TypeScript date type?
如果我在 Angular 项目显示警告消息（需要 typescript@'>=2.7.0 <2.8.0'）时继续工作，我会遇到问题吗？
[英]Am I going to face problems If I keep working on my Angular project while it shows warning message (requires typescript@'>=2.7.0 <2.8.0')?
具有打字稿类的属性取决于其他两个，如何进行？
[英]Having a property of a typescript class depend on two others, how to proceed?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我在@Component 中遇到主机问题
我遇到错误类型“报价”上不存在属性“长度”
为什么我在这个验证器上有“无法读取未定义的属性‘http’”？
我在导入材料表格字段模块时遇到问题。 我正在了解如何解决这个问题？
Angular Material中的“ type”属性存在问题
错误：初始化错误（打字稿）。无法读取未定义的属性'getExecutingFilePath'
我应该如何将日期时间 json 字符串属性 map 转换为 TypeScript 日期类型？
如果我在 Angular 项目显示警告消息（需要 typescript@'>=2.7.0 <2.8.0'）时继续工作，我会遇到问题吗？
我在嵌套两个服务时遇到问题
具有打字稿类的属性取决于其他两个，如何进行？
相关标签