角度7:数据看起来是空的

Question

我是Angular的新手，我正在尝试实现一些看起来简单但...

我想在一个表中检索一些数据，并用它们初始化一个对象。这些数据是我的班主任的详细资料。当我使用输入按钮时，如果指挥家不存在，我想要显示详细信息或一条消息。

然后我有三个重要的部分:服务：

/** Récupérer un conducteur par numéro de carte. Non trouvé: erreur 404 */
  getConducteur(cardNumber: string): Observable<Conducteur> {
    const url = `${this.conducteursUrl}/?cardNumber=${cardNumber}`;
    return this.http.get<Conducteur>(url).pipe(
      catchError(this.handleError<Conducteur>(`getConducteur cardNumber=${cardNumber}`))
    );
}

component.ts文件：

conducteur: Conducteur;

  constructor(private conducteurService: ConducteurService) { }

  getConducteur(cardNumber: string): void{
    this.conducteurService.getConducteur(cardNumber)
      .subscribe(conducteur => this.conducteur = conducteur);
  }

和html文件：

<form>
  <div class="form-group">
    <label for="inputNumCarte">Numéro de carte de conducteur</label>
    <input type="text" class="form-control" id="inputNumCarte" 
      aria-describedby="numCarte" placeholder="Saisir numéro"
      #cardNumber>
    <small id="numCarte" class="form-text text-muted">L'utilisation des données est réservée aux plate-formes.</small>
  </div>
  <button type="submit" class="btn btn-primary mb-2" 
    (click)="getConducteur(cardNumber.value);
    cardNumber.value=''">Vérifier</button>
</form>
<div *ngIf="conducteur">
  <h2>{{conducteur.cardBearerName | uppercase}}</h2>
  <div><span>Numéro de carte : </span>{{conducteur.cardNumber}}</div>
  <div>
    <label>Prénom :
      <p>{{conducteur.cardBearerFirstname}}</p>
    </label>
  </div>
</div>

看起来conducteur没有初始化，但是*ngIf显示，因为它存在，但是他是空的。你能帮我找一下遗漏的地方吗？Thx

hhtp请求响应如下：

status: 404
statusText: "Not Found"
url: "api/conducteurs/?cardNumber=01234567890"

类Conducteur的定义如下：

export class Conducteur {
    cardNumber: string;
    cardStatus: string;
    cardBearerName: string;
    cardBearerFirstname: string;
    cardBearerDob: string;
    cardBearerPob: string;
    cardBearerPhoto: string;
}

最后是需要初始化的数据：

{ cardNumber: "01234567890", cardStatus: "active", cardBearerName: "dupont", cardBearerFirstname: "jérôme", cardBearerDob: "01/01/2000", cardBearerPob: "paris", cardBearerPhoto: "cGhvdG8xCg==" },

顺便说一句，数据只是内存中web API的一个模拟。

当我尝试此代码时：

getConducteur(cardNumber: string): void {
this.conducteurService.getConducteur(cardNumber).subscribe(conducteur =>
  {
    if(conducteur)
  {
  this.conducteur = conducteur;
  console.log(this.conducteur);
  }
  else
  this.conducteur=null;
  console.log("conducteur est null !")
  }
  ,(error)=>
  {
  console.log(error);
  });

我有这样的结果：

​

Answer 1

从api返回时似乎有问题。你会运行这段代码吗：

getConducteur(cardNumber: string): void
{
 this.conducteurService.getConducteur(cardNumber).subscribe(conducteur =>
{
 if(conducteur)
 {
 this.conducteur = conducteur;
 console.log(this.conductteur);
 }
 else
 this.conducteur=null;
}
,(error)=>
{
console.log(error);
});
  }

因此，我们可以看到响应或错误中返回的api (如果存在)。

Answer 2

我终于找到了解决方案。我的服务返回一个在索引0处只有1个conducteur的数组。然后我需要使用RxJS中的.map，如下所示：

getConducteur(cardNumber: string): Observable<Conducteur> {
const url = `${this.conducteursUrl}/?cardNumber=${cardNumber}`;
return this.http.get<Conducteur>(url).pipe(
  map(conducteur => conducteur[0]),
  catchError(this.handleError<Conducteur>(`getConducteur cardNumber=${cardNumber}`))
);
  }

谢谢你的评论，它们对我帮助很大。