每个数组值的Mat输入

时间:2019-08-27 21:02:40

标签: html angular

我在这里要做的是为每个使用ngFor的人显示输入框。但是,这只允许我从第一个输入框中进行选择,当我进行选择时,它将自动更新具有相同值的其余输入。谁能帮助我了解我在这里可能做错了什么,我希望能够从people数组中单独更新每个人的值

 <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>

0 个答案:

没有答案