angulaire, le titre est l'erreur indéfinie

Question

J'ai les pièces suivantes d'un fichier pour une application de pile moyenne. Le côté serveur renvoie des données valides parfaites à partir de MongoDB.

book.ts

export class Book { 
    isbn: string; 
    title: string; 
    author: string; 
    publisher: string; 
    price: number; 
    update_date: Date; 
} 

book.service.ts

dans ce fichier, je le procédé suivant

showBook(id): Promise<Book> { 
     return this.http.get('/book/' + id) 
      .toPromise() 
      .then(response => response.json() as Book) 
      .catch(this.handleError); 
    } 

et un fichier composant

livre-detail.component.ts

ngOnInit() { 
    this.getBookDetail(this.route.snapshot.params['id']); 
} 

// id is passed on via a router.navigate and it is a valid id 

getBookDetail(id): void { 
    console.log('ekgnjk'); 
    this.bookService.showBook(id) 
     .then(res => { 
      console.log(res); 
      this.book = res; 
     }, (err) => { 
      console.log(err); 
     }); 
} 

livre detail.component.html

<div class="container"> 
    <h1>{{book.title}}</h1> 
    <dl class="list"> 
     <dt>ISBN</dt> 
     <dd>{{book.isbn}}</dd> 
     <dt>Title</dt> 
     <dd>{{book.title}}</dd> 
     <dt>Author</dt> 
     <dd>{{book.author}}</dd> 
     <dt>Publisher</dt> 
     <dd>{{book.publisher}}</dd> 
     <dt>Price</dt> 
     <dd>{{book.price}}</dd> 
     <dt>Last Updated</dt> 
     <dd>{{book.updated_at}}</dd> 
    </dl> 
    <div class="row"> 
     <div class="col-md-12"> 
      <a [routerLink]="['/books']" class="btn btn-success">Home</a> 
     </div> 
    </div> 
</div> 

Mon problème est que quand je lance cette application, je reçois l'erreur suivante.

Impossible de lire le titre de propriété de indéfini.

Le titre est la seule propriété qui montre cette erreur. Toutes les autres propriétés renvoie des données valides. Dans la vue, je peux également voir ma propriété de titre. Mais dans le terminal, je vois l'erreur ci-dessus.

Mais quand je change le code de service à ce qui suit,

book.service.ts

showBook(id): Promise<any> { 
     return this.http.get('/book/' + id) 
      .toPromise() 
      .then(response => response.json()) 
      .catch(this.handleError); 
    } 

Ma demande ne montre aucune erreur.

Pourquoi cela se produit-il? Et pourquoi il n'y a pas d'erreur pour les autres propriétés.

Mon schéma MongoDB est illustré ci-dessous;

var mongoose = require('mongoose'); 

var BookSchema = new mongoose.Schema({ 
    isbn: String, 
    title: String, 
    author: String, 
    publisher: String, 
    price: Number, 
    update_date: { 
     type: Date, 
     default: Date.now 
    } 
}); 

module.exports = mongoose.model('Book', BookSchema); 

Answer 1

Lorsque la vue est initialized et tente de montrer votre liaison de données, vous n'avez pas encore votre livre, appel de serveur fonctionne asynchrone , il attend jusqu'à ce que l'appel soit de retour, JS Thread terminera son travail, puis appellera les fonctions then à partir de la boucle d'événement pour affecter la valeur à votre livre. En ce moment (pendant les travaux mentionnés ci-dessus) votre book en undefined.Alors, quand il veut accéder à la propriété title sur la book et parce que book n'est pas défini, il jette l'erreur

Impossible de lire le titre de propriété de non définie

Vous pouvez utiliser ? opérateur de contrôle en toute sécurité dans la vue ou initialisez votre variable book.

Soit <h1>{{book?.title}}</h1> soit this.book = new Book(); avec des paramètres appropriés.

Answer 2

Si la valeur retournée ne contient pas de titre,

response.json() as Book 

ne génèreraient pas à ajouter.

Vous pouvez utiliser l'opérateur en toute sécurité de navigation pour éviter d'avoir une erreur

<h1>{{book?.title}}</h1>