*ngIf 无法读取未定义的属性 'filename'

14 浏览
0 Comments

*ngIf 无法读取未定义的属性 'filename'

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

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

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

原来的代码是这样的：

我希望修改为：

当使用这个修改后，我收到了以下错误：无法读取未定义的属性'filename'。

有人能帮助我吗？

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]);
      }

0

2 答案

0 Comments

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-example',

templateUrl: './example.component.html',

styleUrls: ['./example.component.css']

})

export class ExampleComponent implements OnInit {

items: any[];

constructor() { }

ngOnInit() {

this.items = [];

}

addItem() {

this.items.push({ filename: '' });

}

}

In your example.component.html, you can use the *ngIf directive to check if the items array has elements or not. If it does, display the input field; otherwise, display something else.

By using the *ngIf directive and checking the length of the items array, you can prevent the error "Cannot read property 'filename' of undefined" from occurring. If the array is empty, the input field will not be rendered, avoiding the error.

0
0 Comments

在处理(*ngIf Cannot read property 'filename' of undefined)问题时，我们首先要了解出现此问题的原因。根据给出的内容，我们可以看到代码中使用了*ngIf指令来判断items数组的长度是否大于等于0，如果是，则显示一个文本输入框，并将ngModel绑定到items数组的第一个元素的filename属性上。此外，还使用了ngModelChange事件来更新items数组的第一个元素的filename属性。

然而，在实际运行中，出现了Cannot read property 'filename' of undefined错误。这是因为当items数组为空时，items[0]是undefined，而在这种情况下，试图访问undefined的filename属性就会报错。因此，解决这个问题的方法就是在访问items[0]?.filename之前先判断items[0]是否为undefined。可以使用三元运算符来实现这一点，即将ngModel绑定到(items.length > 0 ? items[0]?.filename : '')这个表达式上。这样，在items数组为空时，ngModel就会绑定到一个空字符串上，避免了出现undefined错误。

根据给出的内容，我们可以看到有一个答案提供了这样的解决方法。即将代码修改为[(ngModel)] = "items.length > 0 ? items[0]?.filename : '' "。然而，在尝试这个解决方法时，却出现了Unexpected token '=' at column 44 in [items.length > 0 ? items[0]?.filename : '' =$event]的错误。这是因为在这个解决方法中，试图将ngModel和ngModelChange事件的绑定合并为一个语句，而这是不正确的语法。因此，我们需要将两者拆分为[ngModel]和(ngModelChange)两个独立的绑定。

我们可以得出以下解决方法：

根据这个解决方法，我们对代码进行了一些修改。现在，ngModel绑定到了一个条件表达式上，避免了访问undefined属性的错误。同时，我们也将ngModelChange事件的绑定拆分为了两个独立的语句。这样，我们就可以解决(*ngIf Cannot read property 'filename' of undefined)问题了。

0