- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在做 Angular Tour-hero 项目(将 Hero 替换为“用户”)。当我将 Hero(User) 和 Hero-detail(User-detail) 分开并尝试访问详细信息时,它没有显示,更新功能也不起作用。它显示此错误:
error TS2532: Object is possibly 'undefined'.
6 <input id="user-name" [(ngModel)]="user.name"placeholder="name">
user
对象,我认为,给出了问题。但是,当我尝试完全按照本教程添加 MessageService 和所有内容时,它起作用了。但是当我删除所有这些时,它给出了这个错误。预先感谢您的帮助。
用户详细信息.component.html:
<div>
<h2>{{user.name | uppercase}} Details</h2>
<div><span>id: </span>{{user.id}}</div>
<div>
<label for="user-name">User name: </label>
<input id="user-name" [(ngModel)]="user.name" placeholder="name">
</div>
<button (click)="goBack()">Back</button>
<button (click)="save()">Save</button>
</div>
user-detail.component.ts:
import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/model/user';
import { UserService } from 'src/app/services/user/user.service';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-user-detail',
templateUrl: './user-detail.component.html',
styleUrls: ['./user-detail.component.scss']
})
export class UserDetailComponent implements OnInit {
user?: User
constructor(
private userService: UserService,
private location: Location,
private route: ActivatedRoute
) { }
ngOnInit(): void {
this.getUser();
}
getUser(): void {
const id =
parseInt(this.route.snapshot.paramMap.get('id')!, 1);
this.userService.getUser(id)
.subscribe(user => this.user = user);
}
goBack(): void {
this.location.back();
}
save():void {
if(this.user){
this.userService.updateUser(this.user)
.subscribe(() => this.goBack())
}
}
}
用户服务.ts:
import { Injectable } from '@angular/core';
import { User } from 'src/app/model/user';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class UserService {
private usersUrl = 'api/users/';
httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json'})
};
getUsers(): Observable<User[]> {
return this.http.get<User[]>(this.usersUrl).pipe(
catchError(this.handleError<User[]>('getUsers',[]))
);
}
/** GET hero by id. Will 404 if id not found */
getUser(id: number): Observable<User> {
const url = `${this.usersUrl}/${id}`;
return this.http.get<User>(url).pipe(
catchError(this.handleError<User>(`getUser id=${id}`))
);
}
updateUser(user: User): Observable<any> {
return this.http.put(this.usersUrl, user, this.httpOptions)
.pipe(
catchError(this.handleError<User[]>('getUsers',[]))
);
}
addUser(user: User): Observable<User>{
return this.http.post<User>(this.usersUrl, user, this.httpOptions)
.pipe(
catchError(this.handleError<User>('addUser'))
)
}
deleteUser(id: number): Observable<User>{
const url = `${this.usersUrl}/${id}`;
return this.http.delete<User>(url, this.httpOptions).pipe(
catchError(this.handleError<User>('deleteUser'))
)
}
constructor(private http: HttpClient) { }
private handleError<T>(operation = 'operation', result?:T){
return (error: any): Observable<T> => {
console.error(error);
return of(result as T);
}
}
}
最佳答案
我相信这个错误是由于 typescript 2.1 或更高版本 引起的,您的代码非常完美!没有任何问题,但未初始化的变量减速方式可能会导致此错误,
现在如果你知道用户值或者你想用任何默认值初始化那么请像下面这样在构造函数中初始化你的用户变量
user: User;
constructor() {
this.user = {
id: 0,
name: ''
};
}
另一个解决方案是使用'Definite Assignment Assertion' 告诉 typescript 这个变量将在运行时有一个值,如下所示
组件.ts
user!: User;
还可以像下面这样对 component.html 文件进行更改
<div>
<h2>{{user?.name! | uppercase}} Details</h2>
<div><span>id: </span>{{user?.id!}}</div>
<div>
<label for="user-name">User name: </label>
<input id="user-name" [(ngModel)]="user?.name!" placeholder="name">
</div>
<button (click)="goBack()">Back</button>
<button (click)="save()">Save</button>
</div>
关于Angular::error TS2532:对象可能是 'undefined',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68615939/
reqwest v0.9 将 serde v1.0 作为依赖项,因此实现 converting serde_json errors into reqwest error . 在我的代码中,我使用 se
我有这个代码: let file = FileStorage { // ... }; file.write("Test", bytes.as_ref()) .map_err(|e| Mu
我只是尝试用angular-cli创建一个新项目,然后运行服务器,但是它停止并显示一条有趣的消息:Error: No errors。 我以这种方式更新了(希望有帮助):npm uninstall -g
我从我的 javascript 发送交易 Metamask 打开传输对话框 我确定 i get an error message in metamask (inpage.js:1 MetaMask -
这个问题在这里已经有了答案: How do you define custom `Error` types in Rust? (3 个答案) How to get a reference to a
我想知道两者之间有什么大的区别 if let error = error{} vs if error != nil?或者只是人们的不同之处,比如他们如何用代码表达自己? 例如,如果我使用这段代码: u
当我尝试发送超过 50KB 的图像时,我在 Blazor 服务器应用程序上收到以下错误消息 Error: Connection disconnected with error 'Error: Serv
我有一个error-page指令,它将所有异常重定向到错误显示页面 我的web.xml: [...] java.lang.Exception /vi
我有这样的对象: address: { "phone" : 888, "value" : 12 } 在 WHERE 中我需要通过 address.value 查找对象,但是在 SQL 中有函数
每次我尝试编译我的代码时,我都会遇到大量错误。这不是我的代码的问题,因为它在另一台计算机上工作得很好。我尝试重新安装和修复,但这没有帮助。这是整个错误消息: 1>------ Build starte
在我的代码的类部分,如果我写一个错误,则在不应该的情况下,将有几行报告为错误。我将'| error'放在可以从错误中恢复的良好/安全位置,但是我认为它没有使用它。也许它试图在某个地方恢复中间表情? 有
我遇到了 csv 输入文件整体读取故障的问题,我可以通过在 read_csv 函数中添加 "error_bad_lines=False" 来删除这些问题来解决这个问题。 但是我需要报告这些造成问题的文
在 Spring 中,验证后我们在 controller 中得到一个 BindingResult 对象。 很简单,如果我收到验证错误,我想重新显示我的表单,并在每个受影响的字段上方显示错误消息。 因此
我不知道出了什么问题,因为我用 Java 编程了大约一年,从来没有遇到过这个错误。在一分钟前在 Eclipse 中编译和运行工作,现在我得到这个错误: #A fatal error has been
SELECT to_char(messages. TIME, 'YYYY/MM/DD') AS FullDate, to_char(messages. TIME, 'MM/DD
我收到这些错误: AnonymousPath\Anonymized.vb : error BC30037: Character is not valid. AnonymousPath\Anonymiz
我刚刚安装了 gridengine 并在执行 qstat 时出现错误: error: commlib error: got select error (Connection refused) erro
嗨,我正在学习 PHP,我从 CRUD 系统开始,我在 Windows 上安装了 WAMP 服务器,当我运行它时,我收到以下错误消息。 SCREAM: Error suppression ignore
我刚刚开始一个新项目,我正在学习核心数据教程,可以找到:https://www.youtube.com/watch?v=zZJpsszfTHM 我似乎无法弄清楚为什么会抛出此错误。我有一个名为“Exp
当我使用 Jenkins 运行新构建时,出现以下错误: "FilePathY\XXX.cpp : fatal error C1853: 'FilePathZ\XXX.pch' precompiled
我是一名优秀的程序员,十分优秀!