Javascript 名为零的JSON

我向JSON服务器发出http请求，并将值放入变量中，当我生成一个console.log时，它会显示JSON中的所有信息，但当我尝试使用插值将信息引入模板时，它会抛出此错误

ERROR TypeError: Cannot read property 'numero' of undefined

一个注意到json在他的名字上带有零，我怎么能解决这个问题呢

我的服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { API } from '../../../app.api';


@Injectable({
  providedIn: 'root'
})
export class TarefadetalheService {

  constructor(private http: HttpClient) { }

  recuperaDetalhes(): any{
    return this.http.get("http://localhost:4000/tarefadetalhe")

 }
}

这是我调用该服务的页面：

import { Component, OnInit } from '@angular/core';
import { NavParams } from '@ionic/angular';
import { TarefadetalheService } from './tarefadetalhe.service';
import { Tarefa } from '../../models/tarefa.model';

@Component({
  selector: 'app-tarefas-detalhe',
  templateUrl: './tarefas-detalhe.page.html',
  styleUrls: ['./tarefas-detalhe.page.scss'],
})
export class TarefasDetalhePage implements OnInit {
 idTarefa = null
 tarefa: any
  constructor(private navParams: NavParams, private getTarefaDetalhe: TarefadetalheService) { }

  ngOnInit() {
    this.idTarefa = this.navParams.get('id_tarefa');
    this.getTarefaDetalhe.recuperaDetalhes().subscribe((data)=>{
      this.tarefa = data[0] //now it works 
    })
  }
}

这是我的模板：

<ion-header>
  <ion-toolbar>
    <ion-title>{{tarefa.numero}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
ID da tarefa é: {{idTarefa}}
</ion-content>

正如你现在看到的，我可以按照我的要求显示数据，但它让我不断抛出错误，我只是尝试再次运行离子服务，但没有效果

---

我试着制作{{tarefa[0].numero}}，但这样他甚至不向我显示模板中的数据。

像下面这样捕获json索引怎么样-

this.tarefa = data[0] 
console.log(this.tarefa)//Here I can show the data

---

然后{tarefa.numero}}应该适合您。

正如其他人所说的那样。tarefa是一个数组，包含所有所需数据的对象位于数组的第一个元素中

this.tarefa = data[0]

或者通过

this.tarefa[0].numero

或者，当您检索数据并将其存储在tarefa变量中时，只需存储数组的第一个也是唯一一个元素

this.tarefa = data[0]

---

这是一个数组，tarefa[0]。numero应该可以很好地工作。请看这里的答案：现在数据正在渲染，可能会重复，但请继续向我抛出错误，如您所见。。。我编辑了问题，第二个建议对我有效，模板现在可以了，但控制台一直向我抛出错误，我不知道为什么：/get请求到API之前，你必须调用tarefa.numero。所以，我必须进行异步并等待？？我知道它做什么，但我不知道如何实现，你能帮我吗？对不起，我真的不太清楚。您不需要使用async await，但需要告诉Angular在实际获取数据之前不要加载模板