@Input 值被视为对象而不是数组答案

【问题标题】：@Input value treated as object instead of array@Input 值被视为对象而不是数组
【发布时间】：2019-02-11 03:47:20
【问题描述】：

在我的父组件中，我按如下方式填充数组：

myarray = [];
...
... // forloop
this.myarray.push({id: <someid>, name: <somename>});

在我的父模板中，我将此设置为子模板的输入

<childcomponent [myarray]="myarray"></childcomponent>

在我的子组件中，我将输入声明为：

@Input() myarray;

但是当我尝试迭代并获取长度时，我无法迭代并且长度为 0。然后我尝试执行“typeof”它返回一个对象。我尝试使用 console.log(myarray) 写入控制台，它给了我：

[]
0: {id: <someid>, name: <somename>}

【问题讨论】：

你能创建一个stackblitz吗
你可以使用@Input() myarray = new Array();它应该工作
它不起作用。仍然无法迭代
直截了当。我认为其他地方有问题。你能创建一个堆栈闪电战，以便其他人可以提供帮助。你可以从stackblitz.com创建它
是的，我发现了。这是因为我在订阅服务后填充了数组。在这种情况下，我在子 html 中放置了一个*ngIf=myarray，所以它只会在 myarray 准备好时呈现

标签： angular

【解决方案1】：

JavaScript 中的数组是一个包含项目列表的全局对象。

您可以将类型指定为 Array 以使对象可迭代。

【讨论】：

嗯，我真的需要在子组件中这样做吗？我认为这应该只是简单的任务。
是的，正如我提到的，JavaScript 中的数组是一个全局对象。所以需要类型转换才能使用它的功能。毕竟类型规范是新支持的 Angular 与 Typescript。
我试图这样做，但仍然不会迭代。可能是因为我订阅了 http 服务后填充了数组？
是的，这就是原因。我需要放置 ngIf=myarray 以等待数组被填充。我认为不需要做你在演示中所做的事情。还是谢谢
是的，它在 http 服务调用之前可能是空白对象。但是，如果您手动指定数组的类型，那么“您不会在 *ngFor 中出现错误”，这就是我想要传达的内容。

【解决方案2】：

您的代码没有问题。如果你打开谷歌控制台，创建一个数组，例如

let a = [];
typeof(a); // "object"

最初，您传递给输入的元素是一个空数组，然后您将一些项目推入其中，因此如果您观察到您有两个要传递给输入的数组状态：1.Empty，2.您在数组中推入的一些对象。

如果您订阅输入并控制台记录其值，您将获得两种不同的输出。

  @Input()
  public set myArray(myArray: Array<any>) {
    if (myArray) {
      console.log(myArray);
    }
  }

当 myArray 的值发生任何变化时，它会控制台记录 myArray 的值

【讨论】：