Angular “如何”；这"；在每个循环中工作？/如何调用每个循环的返回？

我试图用角材料创建一个模型，但我很难让数据显示出来。我得到的错误是它找不到未定义的路径列表。看起来像是在嵌套的389;中添加了“this”。每个循环都造成了这个问题。我对正在发生的事情感到困惑，希望得到指导

这是我的密码：

在data.component.ts中

    @Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {

  @Input() data;

  listOfPaths = [];

  private resourcesLoaded: boolean;

  constructor(private router: Router,
              public dialog: MatDialog) { }

  ngOnInit() {}

  openDialog(): void {
    const dialogRef = this.dialog.open(ViewComponent, {
      width: '1650px',
      data: this.data

    });

  }
}

    import { Component, Inject, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import * as _ from 'lodash';

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
})

export class ViewComponent implements OnInit {

  listOfPaths = [];

  constructor(
    public dialogRef: MatDialogRef<ViewComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
      this.getPathsAsList();
    }

    ngOnInit() {
    }

  onNoClick(): void {
    this.dialogRef.close();
  }

  getPathsAsList() {

    this.listOfPaths= [];

  _.each(this.data.network, function(path){
    _.each(path.fileTypes, function(fileType){
       this.listOfPaths.concat(fileType.modifiedPaths);
      });
  });

  }

}

in view.component.ts

    @Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {

  @Input() data;

  listOfPaths = [];

  private resourcesLoaded: boolean;

  constructor(private router: Router,
              public dialog: MatDialog) { }

  ngOnInit() {}

  openDialog(): void {
    const dialogRef = this.dialog.open(ViewComponent, {
      width: '1650px',
      data: this.data

    });

  }
}

    import { Component, Inject, OnInit } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import * as _ from 'lodash';

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
})

export class ViewComponent implements OnInit {

  listOfPaths = [];

  constructor(
    public dialogRef: MatDialogRef<ViewComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {
      this.getPathsAsList();
    }

    ngOnInit() {
    }

  onNoClick(): void {
    this.dialogRef.close();
  }

  getPathsAsList() {

    this.listOfPaths= [];

  _.each(this.data.network, function(path){
    _.each(path.fileTypes, function(fileType){
       this.listOfPaths.concat(fileType.modifiedPaths);
      });
  });

  }

}

从'@angular/core'导入{Component，Inject，OnInit}；
从“@angular/material”导入{MatDialog，MatDialogRef，MAT_DIALOG_DATA}；
从“lodash”导入*as uuu；
@组成部分({
选择器：“应用程序视图”，
templateUrl:'./view.component.html'，
})
导出类ViewComponent实现OnInit{
路径列表=[]；
建造师(
公共dialogRef:MatDialogRef，
@注入（MAT_对话框_数据）公共数据：任意）{
这个.getPathsAsList（）；
}
恩戈尼尼特（）{
}
onNoClick（）：void{
this.dialogRef.close（）；
}
getPathsAsList（）{
这个.listofPath=[]；
_.each（此.data.network、函数（路径）{
_.each（路径.文件类型，函数（文件类型）{
this.listofPath.concat（fileType.modifiedPath）；
});
});
}
}

在view.component.html中

    <ol>
    <ng-container *ngFor="let path of listOfPaths">
      <li>
        <p>{{path}}</p>
    </li>
    </ng-container>
  </ol>

{{path}}

将函数作为回调传递时，您正在失去上下文。而且

concat

不会改变初始数组，因此您必须使用

push

或重新分配

this.listOfPaths

值

您需要将两个函数都更改为箭头函数

  _.each(this.data.network, (path) => {
    _.each(path.fileTypes, (fileType) => {
       this.listOfPaths = this.listOfPath.concat(fileType.modifiedPaths);
      });
  });

或在闭包中捕获数组

var listOfPaths = this.listOfPaths = [];

_.each(this.data.network, function(path){
    _.each(path.fileTypes, function(fileType){
       listOfPaths.push.apply(listOfPaths, fileType.modifiedPaths);
      });
  });

---

你也不需要用洛达斯来做这个。数组具有允许将上下文作为第三个参数传递的方法。

尝试将

函数更改为箭头函数。像这样：
（path）=>{…
。与具有
文件类型
参数的函数相同。@R.Richards当我尝试这样做时，它也不起作用。谢谢Yury Tarabanko的帮助，现在模式显示正确了！