Question

当我从SqlServer调用API时，我具有以下结构：

{
  "recordsets": [
    [
      {
        "id_alquiler": 71735,
        "nombre_tipo_exhibidor": "Exhibidores de Temporada",
        "nombre_empresa": "TIOMAE",
        "nombre_estado_alquiler": "Por Montar",
        "marca": "ElTio",
        "nombre_sucursal": "EUAI"
      },
      {
        "id_alquiler": 71736,
        "nombre_tipo_exhibidor": "Exhibidores de Temporada",
        "nombre_empresa": "TIOELTOE",
        "nombre_estado_alquiler": "Por Montar",
        "marca": "Wuayba",
        "nombre_sucursal": "TOBAIE"
      },

当我通过资源管理器在.ts组件中调用API时，它向我发送此错误“尝试与'[object Object]'进行比较。仅允许数组和可迭代对象”

我具有结构的接口，并且按照与调用对象相同的顺序在对象的后部或前部正确键入对象，但是仍然会向我发送错误消息，我知道这是因为我需要转换对象，但我已经使用.map（）和.keys（）进行了多种测试，但我没有给出任何帮助，请提供帮助。这是后端中返回查询的函数：

export async function listAlq(req: Request, res: Response) {
    console.time('loop')
    try {
        let response:Alquiler = await pool1.query(
            "Select query");   
        console.log(response);
        res.status(200).json(response);
    }
    catch(error) { //Capturando error
       console.error(error, 'Internal server Error', res.status(500));   
    }
    console.timeEnd('loop')
}

Angular服务

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(
    private http: HttpClient
  ) { }

  getAllAlq() {
    return this.http.get<Alquiler[]>('http://localhost:3000/api/alq');
  }

Angular component.tsc

export class AlquileresComponent implements OnInit {

  alquiler: Alquiler[] = [];

  constructor(
    private dataService: DataService
  ) { }

  ngOnInit() {
    this.fetchAlq();
  }

  fetchAlq() {
    this.dataService.getAllAlq()
    .subscribe(alquiler => {
      this.alquiler = alquiler;
      console.log(alquiler);
    });
  }

}

和我的html

<app-alquileres *ngFor="let alq of alquiler.recordsets">
    <div>
        <h5>{{ alq.id_alquiler }}</h5>
        <h5>{{ alq.marca }}</h5>
        <h5>{{ alq.nombre_empresa }}</h5>
        <h5>{{ alq.nombre_estado_alquiler }}</h5>
        <h5>{{ alq.nombre_sucursal }}</h5>
    </div>
</app-alquileres>

我当前正在无限浏览对象，并且无法在DOM中绘制对象，请帮助

Answer 1

我认为您的对象嵌套的数组比html预期的要深。根据您的代码段...

{
  "recordsets": [
    [
      {
        "id_alquiler": 71735,
        "nombre_tipo_exhibidor": "Exhibidores de Temporada",
        "nombre_empresa": "TIOMAE",
        "nombre_estado_alquiler": "Por Montar",
        "marca": "ElTio",
        "nombre_sucursal": "EUAI"
      },
      {
        "id_alquiler": 71736,
        "nombre_tipo_exhibidor": "Exhibidores de Temporada",
        "nombre_empresa": "TIOELTOE",
        "nombre_estado_alquiler": "Por Montar",
        "marca": "Wuayba",
        "nombre_sucursal": "TOBAIE"
      },

alquiler.recordsets是包含对象的数组的数组。

不确定您将更容易/更好地更改服务或HTML，但是如果您将当前html更改为以下内容，我敢打赌，您应该会看到一些东西。

<app-alquileres *ngFor="let alq of alquiler.recordsets[0]">
    <div>
        <h5>{{ alq.id_alquiler }}</h5>
        <h5>{{ alq.marca }}</h5>
        <h5>{{ alq.nombre_empresa }}</h5>
        <h5>{{ alq.nombre_estado_alquiler }}</h5>
        <h5>{{ alq.nombre_sucursal }}</h5>
    </div>
</app-alquileres>

Answer 2

按照错误说明，它只是说明您正在尝试迭代并反对。这是不允许的。基本上为什么会这样说。根据您的样本数据集，提供的recordsets是一个数组。在recordsets本身下，您还有另一个数组。（仔细看看开头的[方括号），该数组基本上返回要在模板上进行迭代的数组对象的类型，并且不允许这样做

最简单的解决方案是更改模板以匹配recordsets中可迭代的元素：

<app-alquileres *ngFor="let alq of alquiler.recordsets[0]">
    <div>
        <h5>{{ alq.id_alquiler }}</h5>
        <h5>{{ alq.marca }}</h5>
        <h5>{{ alq.nombre_empresa }}</h5>
        <h5>{{ alq.nombre_estado_alquiler }}</h5>
        <h5>{{ alq.nombre_sucursal }}</h5>
    </div>
</app-alquileres>

一旦您在模板中指定了alquiler.recordsets[0]，它就会允许*ngFor遍历每个对象，因为它实际上是一个Object数组元素，而不是先前的Array类型的对象。

另一种解决方案是在打字机控制器上分配它：

export class AlquileresComponent implements OnInit {

  alquiler:any;

  constructor(
    private dataService: DataService
  ) { }

  ngOnInit() {
    this.fetchAlq();
  }

  fetchAlq() {
    this.dataService.getAllAlq()
    .subscribe(alquiler => {
      this.alquiler = alquiler.recordsets[0];
      console.log(alquiler);
    });
  }

在您的模板中：

<app-alquileres *ngFor="let alq of alquiler">
    <div>
        <h5>{{ alq.id_alquiler }}</h5>
        <h5>{{ alq.marca }}</h5>
        <h5>{{ alq.nombre_empresa }}</h5>
        <h5>{{ alq.nombre_estado_alquiler }}</h5>
        <h5>{{ alq.nombre_sucursal }}</h5>
    </div>
</app-alquileres>

如何迭代对象数组或将对象列表转换为数组？

2 个答案: