如何以角度推入数组中的数组？答案

【问题标题】：how to push array in array in angular?如何以角度推入数组中的数组？
【发布时间】：2020-11-04 18:24:57
【问题描述】：

在这里，我将所有控制台和代码放在下面。我想将数组推入数组，例如。在 imagesArray 中有 3 个数组，现在我推送具有 2 个数组的结果数组，因此第一个数组在 imagesArray 中正确推送，但最后一个数组显示未定义且未推送，并给出类似 imageArray undefined 的错误，那么如何推送呢？（我把控制台和代码放在下面）

推送对象前控制台imagesArray

我要推送的结果result

推送控制台后是这样的

add-folder.component.ts

imagesArray : UploadedImages[] = [];

dialogRef.afterClosed().subscribe(result => {
  if(result != '' && result != undefined && result != null){
    for(var i = 1; i <= result.length ; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

添加文件夹.component.html

<div>
  <mat-card *ngFor="let images of imagesArray" style="height : 100px;width : 100px">
    <b>{{images.imageName}}</b> 
    <b>{{images.filesize}}</b>
  </mat-card>
</div>

【问题讨论】：

在 for 循环中将 var i=1 更改为 var i=0 并将此 i <= result.length 更改为 i < result.length
数组索引位置从0开始！
if (result != '' && result != undefined && result != null) 等于 if (result)

标签： javascript angular

【解决方案1】：

在这段代码中

imagesArray : UploadedImages[] = [];

dialogRef.afterClosed().subscribe(result => {
    if(result != '' && result != undefined && result != null){
         for(var i = 1; i <= result.length ; i++){
             this.imagesArray.push(result[i]);
         }
    } 
});

您从位置 1 开始 array。数组从 0 开始。因此，您的数组中有 2 个元素，[element1, element2]。您的代码首先将获得位置编号 1 (element2)，然后插入另一个 array。

并且，下一次迭代，i 将等于 2，即等于 result.length，this.imagesArray.push(result[i]); 将尝试获取不存在的位置 2，并将 undefined 推入 imagesArray .

将您的代码更改为：

for(var i = 0; i < result.length ; i++){
    this.imagesArray.push(result[i]);
}

【讨论】：

【解决方案2】：

List 的长度将返回2，数组的索引从0 开始，所以result.length - 1。

所以你可以这样做：

变化：

var i = 0; // Start from zero because arrays are starts from `0` so we can access the first item as list[0]

还有

result.length - 1; // Subtract 1 from length of list

应用更改后的代码：

dialogRef.afterClosed().subscribe(result => {
  if(result != '' && result != undefined && result != null){
    for(var i = 0; i <= result.length - 1; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

你可以在不从长度中减去-1的情况下做到这一点，只需将条件参数更改为i < result.length为：

dialogRef.afterClosed().subscribe(result => {
  if(result != '' && result != undefined && result != null){
    for(var i = 0; i < result.length; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

StackBlitz Example

【讨论】：

【解决方案3】：

您正在将循环变量 i 初始化为 1，result 应该有一个基于 0 的索引，这意味着您应该使用 i = 0，并使用小于 (<) 而不是小于或等于 (<=)

这就是为什么你没有定义为添加到数组中的最后一个对象

imagesArray : UploadedImages[] = [];

dialogRef.afterClosed().subscribe(result => {
  if(result != '' && result != undefined && result != null){
    for(var i = 0; i < result.length ; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

【讨论】：

【解决方案4】：

推送所有值后，您的数组中有一个undefined 值。在每个订阅中将数组设置为空，然后推送以避免空值。

dialogRef.afterClosed().subscribe(result => {
  this.imagesArray = [];
  if(result != '' && result != undefined && result != null){
    for(var i = 0; i <= result.length ; i++){
      this.imagesArray.push(result[i]);
    }
  } 
});

还可以使用可选操作符仔细检查数组元素是否未定义。

<b>{{images?.imageName}}</b> 
<b>{{images?.filesize}}</b>

【讨论】：

【解决方案5】：

这是在 typescript 中将数组推送到数组中的最新更新方式。您可以使用扩展运算符轻松扩展数组

array1: [...array1, ...array2]

这将扩展array1并将array2中的元素添加到array1中。

您可以在 -https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax 中找到更多相关信息

【讨论】：