我不能调用对象数组

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