html - 数组的每个值的垫输入
问题描述
我在这里要做的是为每个使用 ngFor 的人显示输入框。但是,这只允许我从第一个输入框中进行选择,当我进行选择时,它会自动将剩余的输入更新为相同的值。谁能帮我理解我在这里做错了什么,我希望能够分别从人员数组中更新每个人的值
<table>
<tr>
<td class="detailS">Hours</td>
<td style="width: auto" nowrap class="opt">
<mat-list>
<mat-list-item class="item"
*ngFor="let member of people.value; let i = index">
<div style="margin-left: 50px" nowrap>Start</div>
<div style="margin-left: 30px" *ngIf="edit">
<mat-form-field>
<input matInput [matAutocomplete]="startAuto"
formControlName="start" (click)="onChooseStart()"
required="true">
<mat-autocomplete #startAuto="matAutocomplete"
(optionSelected)="onStartSelected($event)">
<mat-option *ngFor="let time of filteredStart | async"
[value]="time">
{{time | amDateFormat:'h:mm a'}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div style="margin-left: 50px" *ngIf="!edit">
{{start?.value}}
</div>
<div style="margin-left: 50px" nowrap>End</div>
<div style="margin-left: 30px" *ngIf="edit">
<mat-form-field>
<input style="width: 70px" #endInput matInput
[matAutocomplete]="endAuto" (click)="onChooseEnd()"
formControlName="end" required="true">
<mat-autocomplete #endAuto="matAutocomplete"
(optionSelected)="onEndSelected($event)">
<mat-option *ngFor="let time of filteredEnd | async"
[value]="time">
{{time | amDateFormat:'h:mm a'}}{{getDifference(formGroup.get('start').value, time)}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div style="margin-left: 50px" *ngIf="!edit">
{{end?.value}}
</div>
</mat-list-item>
</mat-list>
</tr>
</table>
解决方案
推荐阅读
- laravel - Laravel 5,Mail:: with later() 不工作
- minikube - 将自定义 ssh 公钥放入 minikube 集群上的 authorized_keys
- php - Laravel - 如何在 app.php 中设置语言环境
- xquery - xdmp:http-post 中的超时选项如何工作?
- python - 如何调试与烧瓶邮件相关的烧瓶库特定错误
- c# - 在 Windows Docker 上安装 Matlab
- javascript - 如何将嵌套块模板设置为属性
- ubuntu - 如何通过 ansible playbook 添加存储库
- bigcommerce - BigCommerce - 蓝图问题 - 产品选项
- python - 从 GitHub API 提取的提交与我从 git.Repo 获得的相同项目的提交不同