首页 > 解决方案 > 数组的每个值的垫输入

问题描述

我在这里要做的是为每个使用 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>

标签: htmlangular

解决方案


推荐阅读