angular - 如何解决,Angular:错误类型错误:无法读取未定义的属性“名称”
问题描述
我有以下错误:
SingleUserComponent.html:13 错误类型错误:无法在 Object.debugUpdateDirectives [as updateDirectives] (core.js:10750) 处读取 Object.eval [as updateDirectives] (SingleUserComponent.html:30) 处未定义的属性“名称”
这是我的代码:
model.ts
import {User} from './user';
export class Wallet {
id: number;
pname: string;
puser: User;
constructor(public name: string, public user: User) {
this.pname = name;
this.puser = user;
}
}
单用户组件.html
<div class="row">
<div class="container">
<div class="panel-primary">
<h1 class="panel panel-heading">
{{user.name}}
<button class="btn btn-default pull-right" (click)="addWallet()">
<span class="glyphicon glyphicon-plus"></span>
</button>
</h1>
<div class="panel-body">
<ul class="list-group-item">
<li *ngFor="let wallet of user.wallets" style="list-style: none">
<h3>
{{wallet.name}}
<button class="btn btn-sucess pull-right"
(click)="deleteWallet()">
<span class="glyphicon glyphicon-minus"></span>
</button>
</h3>
</li>
</ul>
</div>
<div class="form-group spacer">
</div>
<div class="form-group">
<h3>Create new Wallet</h3>
<form>
<input type = "text" name = "walletName"
[(ngModel)] = "createdWallet.name" (click) =
"createdWallet.name = '' ">
<button type="button" class="btn btn-success"
(click)="createWallets(user.id)" [disabled] =
"createdWallet.name?.length < 2">Add a new Wallet</button>
</form>
</div>
<!-- <label for="name">
Please choose a new Wallet !
</label>-->
<!-- <input id="name" class="form-control"
[(ngModel)]=selectedWallet.name>
<button type="button" class="btn btn-success"
(click)="onAddWallet()">Add a new Wallet</button>
</div>-->
<!-- <select id="name" class="form-control btn" name="name"
[(ngModel)] = selectedWallet (click)="onSelectWallet()" >
<option *ngFor="let wallet of wallets">{{wallet.name}}</option>
</select>
</label>
<div *ngIf="selectedWallet">
<li>{{selectedWallet}}</li>
</div>-->
<!-- <input type="text" id="name" class="form-control" name="name"
ngModel="" required>-->
<button class="btn btn-default spacer" (click)="onBack()">Back</button>
</div>
</div>
单用户组件.ts
import {User} from '../../models/user';
import {ActivatedRoute, Router} from '@angular/router';
import {DataService} from '../../services/data.service';
import {Wallet} from '../../models/wallet';
import {NgForm} from '@angular/forms';
@Component({
selector: 'app-single-user',
templateUrl: './single-user.component.html',
styleUrls: ['./single-user.component.css']
})
export class SingleUserComponent implements OnInit {
user: User;
users: User[];
// users: User = new User();
wallets: Wallet[] ;
wallet: Wallet;
selectedWallet: Wallet;
createdWallet: Wallet;
constructor(private route: ActivatedRoute,
private dataService: DataService,
private router: Router) { }
ngOnInit() {
this.user = new User();
// Recuperation de l'identifiant depuis l'url
const id = this.route.snapshot.params['id'];
this.dataService.getUserWithWallets(+id).subscribe(
(user: User) => {
console.log('user: ', user);
this.user = user;
}
);
this.getWallets();
}
addWallet() {
this.router.navigate(['/wallets']);
}
deleteWallet(id: number) {
this.dataService.deleteWallet(id).subscribe(
(wallet: Wallet) => {
this.wallet = wallet;
}
);
}
getWallets(): any {
this.dataService.getWallets().subscribe(
(wallets: Wallet[]) => {
console.log('wallets: ', wallets);
this.wallets = wallets;
return this.wallets;
}
);
}
onAddWallet() {
// this.createWallets();
this.user.wallets.push(this.selectedWallet);
console.log('user', this.user);
//this.wallets.push(this.selectedWallet);
console.log('selectedWallet: ', this.selectedWallet);
console.log('this.user.wallet', this.user.wallets);
//if (wallet) {
// this.user.wallets.push(this.selectedWallet);
// }
// this.user.wallets.push(this.selectedWallet);
}
createWallets() {
this.dataService.createWallet(this.createdWallet).subscribe(
(data: Wallet) => {
this.wallet.name = data.name;
this.wallet.user = data.user;
this.createdWallet = new Wallet(this.wallet.name, this.wallet.user);
this.user.wallets.push(this.createdWallet) ;
}
);
}
onBack() {
this.router.navigate(['/users']);
}
}
谢谢您的回答!!!!!:)
解决方案
如我所见,您正在从同步返回数据的 api 请求数据,您可以使用安全导航运算符或 ngIf 来处理此问题,如下所示,
{{user?.name}}
推荐阅读
- go - 互斥锁会保证内存同步吗?
- java - 错误 java.lang.NoClassDefFoundError Lorg/apache/http/util/Args CloseableHttpClient.java 的恢复失败
- git - 合并忽略冲突的提交
- c++ - 使用 mingw-w64 在 Linux 下开发 Windows 是否与在 Windows 下开发一样好?
- permissionerror - PermissionError: [Errno 13] Permission denied: 'C:/Users/Ephraim yousaf/Downloads/Compressed'
- c - 带有链表的哈希表在c中不起作用?
- python - Bazel 项目 + TensorFlow 依赖问题
- c - C6386 - 使用 fread() 函数写入“缓冲区”时缓冲区溢出
- python - 使用```{{}}```(jinja2)和flask时python变量没有显示在HTML文件上
- next.js - 如何在 Next.js 的单个路由中排除尾随斜杠?