![](/img/trans.png)
[英]How to resolve Angular TypeError: Cannot read property 'name' of undefined
[英]How to resolve, Angular: ERROR TypeError: Cannot read property 'name' of undefined
我有以下错误:
SingleUserComponent.html:13错误TypeError:无法读取Object.eval中未定义的属性“名称” [作为updateDirectives](SingleUserComponent.html:30),在Object.debugUpdateDirectives [作为updateDirectives](core.js:10750)
这是我的代码:
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;
}
}
single-user-component.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>
单用户组件
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请求数据,而api会同步返回数据,您可以使用安全的导航运算符或ngIf来按以下方式进行处理,
{{user?.name}}
查看您的错误消息,您必须在此处(第30行)的某个地方添加elvis运算符,不要忽略任何一个。
https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths
<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>
要么这样做,要么将ngIf
包装在所有使用该变量的容器周围:
<li *ngFor="let wallet of user.wallets" style="list-style: none">
<ng-container *ngIf="wallet">
<h3>
{{wallet.name}}
<button class="btn btn-sucess pull-right" (click)="deleteWallet()">
<span class="glyphicon glyphicon-minus"></span>
</button>
</h3>
<ng-container>
</li>
( ng-container执行模板逻辑,而没有实际在DOM中呈现)
另一个(丑陋的)选择是将所有变量初始化为空,但我建议您找到被遗忘的模板变量。
您还可以使用async
管道从可观察对象直接获取模板中的值,这也可以消除错误。
我也刚刚意识到,属性和它们的值之间的HTML中有空格
例如, name = "walletName"
应该为name="walletName"
更好地清理您的代码。 上面的HTML应该可以解决问题。
做加密钱包? ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.