*ngIf 无法读取未定义的属性“文件名”答案

【问题标题】：*ngIf Cannot read property 'filename' of undefined*ngIf 无法读取未定义的属性“文件名”
【发布时间】：2019-11-15 10:20:39
【问题描述】：

我有一个获取文件名的函数。

这个名字是在输入中填写的，但是只有当我插入一个文件并且那里填写了文件名信息时输入背景颜色才可见。

我希望背景颜色在有值或没有值时可见。

它有这个：

 <input * ngIf = "items.length> 0" type = "text" [(ngModel)] = "items [0] .filename" class = "form-control Input-Metadata">

我想要这个：

<input * ngIf = "items.length>= 0" type = "text" [(ngModel)] = "items [0] .filename" class = "form-control Input-Metadata">

使用它时出现以下错误：无法读取未定义的属性“文件名”。

谁能帮帮我？

component.ts

for (let index = 0; index < files.length; index++) {

        const item: any = {
          filename: event.target.files[index].name.split('.')[0],
          fileType: event.target.files[index].type.split("image/").join(""),
          fileSize: event.target.files[index].size,
        };

        this.filename = item.filename;
        this.fileType = item.fileType;
        this.fileSize = item.fileSize;
        this.items.push(item);

        const reader = new FileReader();
        reader.onload = (e: any) => {
          item.url = e.target.result;
          const image = new Image();
          image.src = e.target.result;
          image.onload = function () {
            item.sizeH = image.width;
            item.sizeV = image.height;
            self.sizeH = item.sizeH;
            self.sizeV = item.sizeV;
          };

        }
        formData.append('file', files[index]);
        reader.readAsDataURL(files[index]);
      }

【问题讨论】：

将 items.length>=0 更改为 items.length>0。
好吧，这没有多大意义：如果有 0 个项目，如何用第一个项目的文件名填充该字段？
@SachinJagtap 好吧，所以当我没有信息时，背景颜色不会出现在我面前，我打算让条件大于或等于零:(
items的内容是什么？
我想在列表是否为空时显示颜色（设计）......它只显示如果列表> 0

标签： angular typescript

【解决方案1】：

像这样改变你的 *ngIf 条件

<input *ngIf = "items.length > 0" type = "text" [(ngModel)] = "items[0].filename" class = "form-control Input-Metadata">

【讨论】：

好吧，所以当我没有信息时，背景颜色不会出现在我面前，我打算让条件大于或等于零:(
@HarryJames 我不确定背景颜色与此有何关系，但如果您想访问一个项目，该项目必须存在。因此，请确保它存在：如果 items 数组为空，则向其中添加一个元素。
@JBNizet 就是这样，我想在列表是否为空时显示颜色（设计）
再一次，我们不知道“颜色（设计）”是什么意思。如果您希望此输入起作用，则数组中必须有一个项目。因此，如果没有，请添加一个。如果您想要其他内容，请澄清您的问题。
我用我使用的功能添加了组件

【解决方案2】：

这应该可行：

<input * ngIf = "items.length>= 0" type = "text" [ngModel]="items && items[0]?.filename" (ngModelChange)="items?.length && items[0].filename=$event" class = "form-control Input-Metadata">

基于这个answer

【讨论】：

@HarryJames 哦，我明白了，然后试试[(ngModel)] = "items.length > 0 ? items[0]?.filename : '' "。
我在 [items.length > 0 的第 44 列得到了这个 Unexpected token '='？ items[0]?.filename : '' =$event]
我认为我们必须将双向数据绑定拆分为 [ngModel] 和 (ngModelChange)。我会尽快更新我的答案。