Question

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

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

然后，我分为三个重要部分：服务：

/** 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>

似乎没有初始化行为体，但是* ng如果显示，因为它存在但他为空。您能帮我找到我想念的地方吗？谢谢

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

我终于找到了解决方案。我的服务返回一个只有1个指挥者的数组，索引为0。然后我需要像这样从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}`))
);
  }

感谢您的意见，他们对我有很大帮助。

Answer 2

好像从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。

Angular 7：数据看起来空白

2 个答案: