AngularDart ngFor with input change

Question

Tasks structure like: <Map<String,String>>[{'_tasknumber':'123'}]

@Component(
    template: '''
    <div *ngFor="let task of tasks">
                <label for="fileInput">
                    <material-button>
                        Add image 
                    </material-button>
                </label>

          id: {{task['_tasknumber']}}

          <input type="file"
                id="fileInput"
                multiple
                #fileInput
                (change)="uploadFilesForTask(fileInput.files, task['_tasknumber'])"/>
    </div>
    ''')

In function uploadFilesForTask I just print taskId value:

Future<Null> uploadFilesForTask(
      List<File> files, String taskId) async {
    print(taskId);
}

When I press "Add image" button I every time get id of first task in list of tasks.

When I press input button "Choose files" I get right id what I need.

How I can get right id of task by "Add image" button?

pubspec.yaml:

environment:
  sdk: '>=1.24.2'

dependencies:
  angular: '^4.0.0'
  angular_forms: '^1.0.0'
  angular_router: '^1.0.2'
  angular_components: '^0.8.0'

Just string in tasks structure like: <Map<String,String>>[{'_tasknumber':'123'}] — Vitaliy Vostrikov
I'm sure there is something wrong with your map. Perhaps accidentally assigned the same instance to every task in tasks or similar. — Günter Zöchbauer
Please add the code to your question how you id: ... to the label like shown in your screenshot. — Günter Zöchbauer

Vitaliy Vostrikov Vitaliy Vostrikov · Accepted Answer · 2017-12-04T07:15:34

I use not unique label for attribute.

Not right:

<label for="fileInput">
                    <material-button>
                        Add image 
                    </material-button>
                </label>

          <input type="file"
                id="fileInput"
                multiple
                #fileInput
                (change)="uploadFilesForTask(fileInput.files, task['_tasknumber'])"/>

Right:

<label [attr.for]="task['_tasknumber']">
                    <material-button>
                        Add image 
                    </material-button>
                </label>

          <input type="file"
                [attr.id]="task['_tasknumber']"
                multiple
                #fileInput
                (change)="uploadFilesForTask(fileInput.files, task['_tasknumber'])"/>

AngularDart ngFor with input change

1 Answers