Angular 4循环绑定PDF文件名遇filename未定义错误，如何解决？

我来帮你搞定这个问题，你遇到的filename未定义错误和模板展示问题，主要是几个小细节没处理好，咱们一步步来修正：

1. 先修复*ngFor的语法错误 #

你原始代码里的*ngFor="let file of files >明显写错了——少了闭合的双引号和右括号，这会直接导致Angular解析模板失败，进而引发后续的变量识别问题。正确的写法应该是*ngFor="let file of files"。

2. 确保files数组的结构符合预期 #

错误提示filename未定义，大概率是你的files数组里的元素没有filename这个属性，或者files本身没被正确初始化（比如是undefined或者空数组）。你得在组件类里确认files的结构是这样的：

// 你的组件.ts文件里的代码
export class YourComponent {
  // 初始化files数组，每个元素必须包含filename属性
  files = [
    { filename: 'xyz.pdf' },
    { filename: 'report.pdf' },
    // 其他PDF文件对象
  ];
}

如果files是通过API异步获取的，记得要处理异步逻辑，比如用Observable配合async管道（后面会提到）。

3. 修正模板里的路径和尺寸写法 #

另外你写的width="100p"是无效的，应该改成width="100px"才能正确设置宽度。同时，路径绑定可以用Angular推荐的属性绑定语法，或者保留插值表达式，两种都能用：

修正后的模板代码（属性绑定版，更推荐）

<div *ngFor="let file of files">
  <object width="100px" height="50" [data]="'/info/' + file.filename" type="application/pdf"></object>
</div>

插值表达式版

<div *ngFor="let file of files">
  <object width="100px" height="50" data="/info/{{file.filename}}" type="application/pdf"></object>
</div>

4. 处理异步获取文件列表的情况 #

如果你的files是从后端API异步拉取的，比如用HttpClient请求，那你需要用async管道来处理Observable：

// 组件类里的异步请求示例
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export class YourComponent {
  files$: Observable<any[]>;

  constructor(private http: HttpClient) {
    this.files$ = this.http.get<any[]>('/api/your-files-endpoint');
  }
}

对应的模板要改成：

<div *ngFor="let file of files$ | async">
  <object width="100px" height="50" [data]="'/info/' + file.filename" type="application/pdf"></object>
</div>

最后检查资源路径 #

别忘了确认你的PDF文件存放路径是否正确！如果Angular项目里的PDF文件放在src/assets/info目录下，那路径应该改成'/assets/info/' + file.filename，否则会找不到文件。

内容的提问来源于stack exchange，提问作者J. Davidson