提问者:小点点

Angular:如何使用ng-repeat内部输入字段的更改来更新DB


我在为一个个人项目(一个锦标赛)做一个小角度页面。 我使用Oracle DB存储所有匹配项。 使用PHP,我能够向数据库发出请求,并接收存储在数组中的所有匹配项(来自团队的名称和目标)。

我使用Angular(ng-repeat)在我的页面上显示这个数组。 正如您所看到的,每一行中都有输入字段,用于填写每支球队的进球数。 现在,当您单击底部的按钮(见图)时,我想(通过PHP)更新DB中的所有行。

做这件事最简单的方法是什么? 如何用输入字段中的新值更改该数组并将它们发送到DB?

HTML代码:

<table>
<tr ng-repeat="wedstrijd in ophalen track by $index">
  <td class="ploeg">{{wedstrijd.ploeg1_naam}}</td>
  <td class="doelpunten"><input type="text" value={{wedstrijd.ploeg1_doelpunten}}></td>
  <td class="streepje">-</td>
  <td class="doelpunten"><input type="text" value={{wedstrijd.ploeg2_doelpunten}}></td>
  <td class="ploeg">{{wedstrijd.ploeg2_naam}}</td>
</tr>
</table>

从“我的页面”屏幕:


共1个答案

匿名用户

多种可能的方法,按实例

解决方案1

  • 按接口获取所有具有更新值的数组
  • 将其全部发送到后端

解决方案2

  • 按接口获取所有具有更新值的数组
  • 逐个发送到后端

第一步是常见的

步骤1在Angular模板中,更改value=“。。。” by[(ngModel)]=“。。。” 双数据绑定将直接更新数组(ophalen)

...
<td class="doelpunten"><input type="text" [(ngModel)]="wedstrijd.ploeg1_doelpunten"></td>
...

步骤2在Angular controller中,将您的数组与您的数组的http数据一起发送到(ophalen)

constructor(...
            private updateService: UpdateService
            ...
}

// Called on button 'Updaten'
onSubmit() {
    ...
    // Save
    this.updateService.save(this.ophalen).subscribe(
        (result: any) => {
            // Do something like echo message
        }
    );
}

步骤3创建一个Angular服务来调用您的后端(PHP)。 在这里你可以选择一个一个去,也可以一次全部去。 服务仍将获取您的数组作为输入参数。

import {HttpClient} from '@angular/common/http';

export class UpdateService {
    constructor(private http: HttpClient) {}

    saveAll(arrayModel: any): Observable<any> {
       const url = 'url/to/your/php/post/service';
       return this.http.post<any[]>(url, arrayModel);
       // Or loop on each and call saveOne...
    }

    saveOne(model: any): Observable<any> {
       const url = 'url/to/your/php/post/service';
       // with full model
       return this.http.post<any[]>(url, model);
       // or only with ids and new value
       return this.http.post<any[]>(url, {id:model.id, newValue:model.ploeg1_doelpunten);
    }

}

在PHP中的第4步,您必须创建一个/多个rest入口点。

  • 在PHP中解析JSON并在其上循环应该不会成为生成所需SQL update语句的问题。
  • 如果逐个进行,则是相同的SQL生成。 只是您显然不需要循环。