具有输入更改的 AngularDart ngFor

Question

任务结构如下：<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>
    ''')

在函数 uploadFilesForTask 中，我只打印 taskId 值：

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

当我按下 "Add image" 按钮时，我每次都会获取任务列表中第一个任务的 ID。

当我按下输入按钮时 "Choose files" 我得到了我需要的正确 ID。

如何通过 "Add image" 按钮获取正确的任务 ID？

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'

Answer 1

我使用不唯一的 label for 属性。

不对：

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

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

右：

<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

AngularDart ngFor with input change

dart

angular-dart