Я не могу назвать массив объектов - PullRequest
Новая
       6

Я не могу назвать массив объектов

0 голосов
/ 09 февраля 2019

Я не могу вызвать массив объектов в моем интерфейсе, я оставляю свой интерфейс Angular, а затем мне приходится вызывать его в дополнении в typeScript, но я не понимаю, как вызывать массив, если он не имеетимя, и если я могу его назвать, объясните мне!

gibulo-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

1 Ответ

0 голосов
/ 10 февраля 2019

Этот синтаксис: 

[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

...