时间戳

首页 > 解决方案 > 错误类型错误：“_co.client 未定义”

angular - 错误类型错误：“_co.client 未定义”

问题描述

我已经恢复了客户端的数据，现在我想恢复它成功完成的每个客户端的详细信息，但它给了我这个错误。

我已经恢复了客户端的数据，现在我想恢复它成功完成的每个客户端的详细信息，但它给了我这个错误。

错误类型错误：“_co.client 未定义”

客户端服务.ts

       import { map } from 'rxjs/operators';
        import { AngularFirestore,AngularFirestoreCollection,AngularFirestoreDocument } from 'angularfire2/firestore';
        import { Injectable } from '@angular/core';
        import { Client } from '../models/client';
        import { Observable } from 'rxjs';
    @Injectable({
      providedIn: 'root'
    })
    export class ClientService {
      clientsCollection:AngularFirestoreCollection<Client>;
      clientsDoc:AngularFirestoreDocument<Client>;

      constructor(private afs : AngularFirestore) { 
      this.clientsCollection=  this.afs.collection('clients');
      }
    getClient(id:string):Observable<Client>{
        return this.clientsCollection.doc(id).valueChanges();
      }
}

详细信息-client.component.ts

import { FlashMessagesService } from 'angular2-flash-messages';
import { ClientService } from './../../services/client.service';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Client } from 'src/app/models/client';


@Component({
  selector: 'details-client',
  templateUrl: './details-client.component.html',
  styleUrls: ['./details-client.component.css']
})
export class DetailsClientComponent implements OnInit {
  id:string;  
  client:Client; 

  constructor(
    private clientService:ClientService,
    private route:ActivatedRoute,
    private flashMessage:FlashMessagesService
  ) { } 

  ngOnInit() {
    this.id = this.route.snapshot.params.id;
    this.clientService.getClient(this.id).subscribe(client =>{
      this.client = client;
      console.log(this.client);
    })

  }  

}

详细信息-client.component.html

<div class="row m-3">
    <div class="col-md-6">
        <a routerlink="/"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i>go to dashboard</a>
    </div>
    <div class="col-md-6">
        <div class="btn-group">
            <button class="btn btn-danger">
              <i class="fa fa-pencil" aria-hidden="true"></i>Edit
            </button>
            <button class="btn btn-dark">
                <i class="fa fa-trash" aria-hidden="true"></i>Delete
            </button>
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body">
        <h4 class="card-title">{{ client.firstname }} {{ client.lastname }}</h4>

        <div class="row"> 
            <div class="col-md-8">
                <ul class="list-group">
                    <li class="list-group-item ">id : <strong>{{ id }}</strong></li>
                    <li class="list-group-item ">Phone : <strong>{{ client.phone }}</strong></li>
                    <li class="list-group-item">email : <strong>{{ client.email }}</strong></li>
                    <li class="list-group-item ">Disabled item</li>
                </ul>
            </div>
            <div class="col-md-4 text-right">
                balance  <button class="btn btn-success"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                <h4>{{ client.balance | currency:"USD":"symbol"}}</h4>
            </div>
        </div>
    </div>
</div>

标签： angular

解决方案

您的问题出在模板中，因为您的客户端变量在开始时未定义，因为 .subscribe 是异步方法。

尝试使用管道异步（| async），例如：

*ngIf="client.id!=5 | async"
//OR
{{client.id | async}}

或者你可以使用？在对象变量之前，例如：

*ngIf="client?.id!=5 "
//OR
{{client?.id}}

推荐阅读