arrays - 数组中的 typescript 元素不可访问

Question

这似乎是一个很尴尬的问题:

我正在使用以下代码访问我的 modal.service.ts:this.modalService.add('test');

我的 modal.service.ts 如下所示:

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ModalService {
    private modals: any[] = [];

    add(modal: any) {
        // add modal to array of active modals
        this.modals.push(modal);
    }

    remove(id: string) {
        // remove modal from array of active modals
        this.modals = this.modals.filter(x => x.id !== id);
    }

    open(id: string) {
        // open modal specified by id
        const modal = this.modals.find(x => x.id === id);
        console.log(this.modals)
        console.log(this.modals[0])
        //modal.open();
    }

    close(id: string) {
        // close modal specified by id
        const modal = this.modals.find(x => x.id === id);
        modal.close();
    }
}

为什么 console.log(this.modals[0]) 给我 undefined 而 this.modals 给我一个输出'test' 位于位置 0 的数组？

这是控制台输出:

Answer 1

这是浏览器控制台(或功能)的问题。它表明 this.modals 的第 0 元素是“测试”，因为在检查时它是。但是在执行的时候是空的。

{
  const anArray = [];
  console.log(anArray);
  console.log(anArray[0]);
  anArray.push("foo");
}
// Browser's output:
// >>> []  <-- But expanded it will show [0: "foo"].
// >>> undefined

{
  const anArray = [];
  anArray.push("foo");
  console.log(anArray);
  console.log(anArray[0]);
}
// Browser's output:
// >>> ["foo"]  <-- See. Already pre-filled on display.
// >>> foo

所以你实际拥有的是竞争条件。您的 this.modals 在 open 被调用后被填充。