Question

我有以下错误：

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>

single-user-component.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']);
  }

}

谢谢您的回答！！！！：）

Answer 1

如我所见，您正在从api请求数据，而api会同步返回数据，您可以使用安全的导航运算符或ngIf来按以下方式进行处理，

{{user?.name}}

Answer 2

查看错误消息，您必须在此处（第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应该可以解决问题。

制作加密钱包？ ;）

如何解决，角度：错误TypeError：无法读取未定义的属性“名称”

2 个答案: