Question

我无法在接口中调用对象数组，我离开了Angular接口，然后必须在typeScript的补码中调用它，但是如果不包含数组，我将不知道如何调用该数组一个名字，如果可以的话，请解释一下！

Vehiculo-interface.ts

export interface vehiculointerface {
    placa?: string,
    [index:number]: { Ubicacion ?: string, Nombre ?: string }
    id?: string
}

detalles-placa.component.ts

import { Component, OnInit } from '@angular/core';
import { PostService } from 'src/app/post.service';
import { ActivatedRoute,Params } from '@angular/router';
import { vehiculointerface } from '../Models/Vehiculo-interface';

@Component({
    selector: 'app-detalles-placa',
    templateUrl: './detalles-placa.component.html',
    styleUrls: ['./detalles-placa.component.css']
})
export class DetallesPlacaComponent implements OnInit {

    constructor(private post: PostService, route: ActivatedRoute) { }

    private vehiculo: vehiculointerface = {
        placa: "",
        { Ubicacion: "", Nombre: ""},

        index() = { Ubicacion: "", Nombre: "" }
    }

    ngOnInit() { }
}

我无法调用在接口[index:number]: {Ubicacion ?: string, Nombre ?: string}中声明的对象数组我无法调用在接口Vehiculo-interface.ts中声明的对象数组这是我在detalles-placa.component.ts中需要的对象数组

Answer 1

此语法：

[index:number]: { Ubicacion ?: string, Nombre ?: string }

是索引签名，用于定义可索引的类型。可索引类型是我们可以“索引到”的类型。

您可以在此处了解有关它们的更多信息：https://www.typescriptlang.org/docs/handbook/interfaces.html

这是文档中的示例：

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

因此，它不是定义特定的命名属性，而是提供一种“索引”您的类型的方法。

单独使用索引器

使用您的结构，这对我有用：

  private vehiculo: vehiculointerface = [{
    Ubicacion: "some string",
    Nombre: "some id"
  },
  {
    Ubicacion: "other string",
    Nombre: "other id"
  }]

我将其视为对象数组。（不确定为什么要为不是本应作为数组处理的信息拥有索引器属性？）

您可以按以下方式在模板中访问它：

<div *ngFor="let item of vehiculo">
  {{ item.Ubicacion}}; {{ item.Nombre}}
</div>

与其他成员一起使用索引器

我还没有真正与其他成员一起使用索引器，因此我不确定您要实现什么目标。但是类似的东西也对我有用：

  private vehiculo: vehiculointerface = {
    placa: "some string",
    id: "some id"
  }

  ngOnInit() {
    this.vehiculo["some index"] = {
      Ubicacion: "some string",
      Nombre: "some id"
    }
    this.vehiculo["other index"] = {
      Ubicacion: "other string",
      Nombre: "other id"
    }
    console.log(JSON.stringify(this.vehiculo));
  }

请注意如何与索引器无关地定义非索引器成员。

上面的代码定义了接口的基本属性，然后使用索引器设置了附加值。

结果结构如下：

{
 "placa":"some string",
 "id":"some id",
 "some index":{"Ubicacion":"some string","Nombre":"some id"},
 "other index":{"Ubicacion":"other string","Nombre":"other id"}
}

然后我使用以下代码在模板中对其进行访问：

<div *ngFor="let item of vehiculo2 | keyvalue">
  {{ item.key}}; {{ item.value}}
</div>

但是请注意，索引属性的值显示为[object, Object]，因为它们的类型为{ Ubicacion ?: string, Nombre ?: string }

这是一个堆叠闪电战：https://stackblitz.com/edit/angular-indexer-deborahk

我无法调用对象数组

1 个答案: