*ngIf Cannot read property 'filename' of undefined

Question

I have a function that gets the file name.

This name is filled in an input, however the input background color is visible only when I insert a file and the file name information is filled there.

I want the background color to be visible when it has or doesn't have values.

It had this:

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

I want this:

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

When using this I get the following error: Cannot read property 'filename' of undefined.

Can anyone help me?

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

Well, that doesn't make much sense: how could the field be populated with the file name of the first item if there is 0 item? — JB Nizet, Nov 15 '19 at 10:22
@SachinJagtap Well, so the background color does not appear to me when I have no information, I intend to have the condition greater than or equal to zero :( — , Nov 15 '19 at 10:28
I want to display the color (design) when the list is empty or not... It only shows if the list is> 0 — , Nov 15 '19 at 10:32
Sharing the content of `items` will help. Does it have any elements present in it? — Nicholas K, Nov 15 '19 at 10:35
Just `console.log(this.items)` after your processing logic; sharing your component doesn't really help here — Nicholas K, Nov 15 '19 at 10:42
Basically the items, contains all the added files and their information. I tried to put everything in an array — , Nov 15 '19 at 10:47

score 1 · Answer 1 · answered Nov 15 '19 at 10:24

1

Change your *ngIf condition like this

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

answered Nov 15 '19 at 10:24

Ankur Patel

478
3
6

Well, so the background color does not appear to me when I have no information, I intend to have the condition greater than or equal to zero :( – Nov 15 '19 at 10:27
@HarryJames I'm not sure how background colors have anything to do with this, but if you want to access an item, the item must exist. So, make sure it exists: if the items array is empty, then add an element to it. – JB Nizet Nov 15 '19 at 10:28
@JBNizet That's it, I want to display the color (design) when the list is empty or not – Nov 15 '19 at 10:31
1

Again, we have no idea what "color (design)" means. If you want this input to work, then there must be an item in the array. So, if there is none, add one. If you want something else, then clarify your question. – JB Nizet Nov 15 '19 at 10:34
I added the component with the function I use – Nov 15 '19 at 10:38

raaby · Accepted Answer · 2019-11-15T11:02:53.290

0

This should work:

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

It's based on this answer

edited Nov 15 '19 at 11:02

answered Nov 15 '19 at 10:26

raaby

71
4

@HarryJames Oh I see, try `[(ngModel)] = "items.length > 0 ? items[0]?.filename : '' "` then. – raaby Nov 15 '19 at 10:38
I get this Unexpected token '=' at column 44 in [items.length > 0 ? items[0]?.filename : '' =$event] – Nov 15 '19 at 10:42
I think we have to split two-way data binding into [ngModel] and (ngModelChange). I will update my answer soon. – raaby Nov 15 '19 at 10:52

*ngIf Cannot read property 'filename' of undefined

2 Answers2