如何添加功能以一次将多个记录从angular更新到json [英] How do I add functionality to update multiple records at a time to json from angular

问题描述

我正在使用有角度的httpclient进行粗体操作.我为每个记录都有一个编辑选项，但是我想一次通过选择复选框并单击更新按钮来更新多个记录.

I am using angular httpclient to do the crud operations. I have an edit option for every record but I wanted to update multiple records at a time by selecting the checkbox and click on the update button.

能否请您仔细研究一下，并帮助我实现这一点，以便在影响每一行之前都具有一个复选框，并选择单击编辑"按钮，选择更新的选项" n单击更新"按钮以更新所有这些选定的记录.

Can you please look into it and help me to achieve the same to have a checkbox before impact for every row and select click on the edit button, select updated option n click on update button to update all those selected records.

此外，如果我能从那些记录中真正找出有用的，不适用的和仅供参考的数量，那么

Also, If I can get the count of how many applicable, not applicable, and FYI out of those records that would be really helpful.

common.service.ts

common.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CommonService {

  constructor(private http:HttpClient) { }

  createUser(user: any) {
    return this.http.post("http://localhost:3000/users", user);
  }
  getAllUser() {
    return this.http.get("http://localhost:3000/users");
  }
  updateUser(user: any): Observable<any> {
    return this.http.put("http://localhost:3000/users/" + user.id, user);
  }
  deleteUser(user: any) {
    return this.http.delete("http://localhost:3000/users/" + user.id);
  }
}

app.component.ts

app.component.ts

    import { Component } from '@angular/core';
import { CommonService } from './common.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'db-poc1';
  allUser: any;
  isEdit = false;
  isView = false;
  isBatchEdit = false;
  totalRecords: any;
  page: Number = 1;
  currentImpact: string = '';

  isNonTrade: boolean = false
  checkAllNonTrades: boolean = false

  changeTradesByCategory(event) {
    if (event.target.name == 'nontrades') {
      this.isNonTrade = true
    }

    if (this.isNonTrade && this.checkAllNonTrades) {
      event.target.checked = true
    }
  }

  userObj = {
    id: '', first_name: '', last_name: '', email: '', gender: '', ip_address: '', impact: ''
  }

  impactCount = {
    applicable: 0, notapplicable: 0, fyi: 0 
  }

  batchUpdateUsers = [];

  constructor(private commonService: CommonService) {}

  ngOnInit() {
    this.getLatestUser();
  }
  
  checkboxClicked() {
    this.batchUpdateUsers = this.allUser.filter(row => row.checked);
    this.isView  = false;
    this.isBatchEdit = this.batchUpdateUsers.length > 0;
    this.currentImpact = this.userObj.impact;
  }

  selectAllClicked(event) {
    this.isBatchEdit = true;
    const checked = event.target.checked;
    this.allUser.forEach(item => item.selected = checked);
    this.batchUpdateUsers = checked;
    this.isBatchEdit = checked > 0;
    this.currentImpact = this.userObj.impact;
  }

  addUser(formObj: any) {
    this.commonService.createUser(formObj).subscribe((response) => {
      this.getLatestUser();
    })
  }

  getLatestUser() {
    this.commonService.getAllUser().subscribe((response) => {
      this.allUser = response;
      this.totalRecords = this.allUser.length;
      this.getApplicableCounts();
      this.allUser.forEach(row => row.checked = false);
    })
  }

  getApplicableCounts() {
    this.impactCount = {applicable: 0,notapplicable: 0,fyi: 0}
    this.allUser.forEach(row => {
      if (row.impact === 'Applicable') {
        this.impactCount.applicable++;
      } else if (row.impact === 'Not Applicable') {
         this.impactCount.notapplicable++;
      } else if (row.impact === 'FYI') {
        this.impactCount.fyi++;
      }
    });
  }

  editUser(user: any) {
    this.isEdit = true;
    this.userObj = user;
    this.allUser.forEach(user => user.checked = false);
    this.currentImpact = user.impact;
  }

  deleteUser(user: any) {
    this.commonService.deleteUser(user).subscribe(() => {      
      this.getLatestUser();
    })
  }

  updateUser() {
    this.isEdit = !this.isEdit;
    this.userObj.impact = this.currentImpact;
    this.commonService.updateUser(this.userObj).subscribe(() => {
      this.getLatestUser();
    })
    this.getApplicableCounts();
  }

  cancelEdit() {
    this.isEdit = false;
    this.isView = false;    
  }

  viewUser(user: any) {
    this.isView = true;
    this.userObj = user;
  }

  cancelBatchEdit() {
    this.isBatchEdit = false;
    this.allUser.forEach(user => {user.checked = false});
  }

  batchUpdateUser() {
    this.isBatchEdit = false;
    const batchUpdateUserList = [];
    this.allUser.forEach(user => {
      if (user.checked) {
        user.impact = this.currentImpact
        batchUpdateUserList.push(user);
        user.checked = false;
        this.commonService.updateUser(user).subscribe(() => {
          this.getLatestUser();
        })
      }
    });

    this.commonService.updateUser(this.userObj).subscribe(() => {
      this.getLatestUser();
    })

    this.getApplicableCounts();
  }

}

app.component.html

app.component.html

    <div class="container-fluid">
  <div class="text-right toal-records">Total: {{totalRecords}}</div>

  <div class="skills">
    <ul class="labels">
      <li>Applicable</li>
      <li>Not Applicable</li>
      <li>FYI</li>
    </ul>
    <ul class="lines">
      <li class="line l--0"><span class="line__label">0</span></li>
      <li class="line l--1"><span class="line__label">1</span></li>
      <li class="line l--2"><span class="line__label">2</span></li>
      <li class="line l--3"><span class="line__label">3</span></li>
      <li class="line l--4"><span class="line__label">4</span></li>
      <li class="line l--5"><span class="line__label">5</span></li>
      <li class="line l--6"><span class="line__label">6</span></li>
      <li class="line l--7"><span class="line__label">7</span></li>
      <li class="line l--8"><span class="line__label">8</span></li>
      <li class="line l--9"><span class="line__label">9</span></li>
    </ul>
    <div class="charts">
      <div class="chart chart--dev">
        <ul class="chart--horiz">
          <li class="chart__bar" [style.width]="impactCount.applicable * 10 + '%'"></li>
          <li class="chart__bar" [style.width]="impactCount.notapplicable * 10 + '%'"></li>
          <li class="chart__bar" [style.width]="impactCount.fyi * 10 + '%'"></li>
        </ul>
      </div>
    </div>
  </div>

  <table class="table table-sm table-responsive">
    <thead>
      <tr>
        <th>
          <input type="checkbox" name="allNonTrades" (change)="selectAllClicked($event)">        
        </th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Gender</th>
        <th>ID Address</th>
        <th>Impact</th>
        <!-- <th></th> -->
      </tr>
    </thead>
    <tbody>
      <tr class="record-row" (click)="viewUser(user)" *ngFor="let user of allUser | paginate: { id: 'listing_pagination', itemsPerPage: 10, currentPage: page, totalItems: totalRecords }">
        <td><input *ngIf="!isEdit"  name="nontrades" [checked]="user.selected" (change)="changeTradesByCategory($event)" [(ngModel)]="user.checked" type="checkbox" (change)="checkboxClicked()"></td>
        <td>{{user.first_name}}</td>
        <td>{{user.last_name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.gender}}</td>
        <td>{{user.ip_address}}</td>
        <td>{{user.impact}}</td>
        <!-- <td>
          <button *ngIf="!isEdit" class="btn btn-primary btn-sm" (click)="editUser(user)" data-toggle="modal" data-target="#exampleModel">Edit</button>
        </td> -->
      </tr>
    </tbody>
  </table>
  
  <pagination-controls id="listing_pagination" directionLinks="true" (pageChange)="page = $event"></pagination-controls>
  
  <div *ngIf="isView" class="view-details">
    <ul>
      <li>First Name <br />{{userObj.first_name}}</li>
      <li>Last Name <br />{{userObj.last_name}}</li>
      <li>Email <br />{{userObj.email}}</li>
      <li>Gender <br />{{userObj.gender}}</li>
      <li>IP Address <br />{{userObj.ip_address}}</li>
      <li>Impact <br />{{userObj.impact}}</li>
    </ul>
  </div>

  <form #myForm="ngForm">
    <div class="form-group">
      <select name="impact" [disabled]="!isBatchEdit" class="form-control form-control-sm" [(ngModel)]="currentImpact">
        <option value="" disabled selected>Change Impact</option>          
        <option>Applicable</option>
        <option>Not Applicable</option>
        <option>FYI</option>
      </select>
    </div>
    <button type="button" [disabled]="!isBatchEdit" (click)="batchUpdateUser(); myForm.reset()" class="btn btn-success btn-sm btn-update mr-2">
      Update
      </button>
    <button type="button" [disabled]="!isBatchEdit" (click)="cancelBatchEdit(); myForm.reset()" class="btn btn-secondary btn-sm">Cancel</button>
  </form>

  <!-- <div *ngIf="isEdit">
    <form #myForm="ngForm">
      <div class="form-group">
        <select name="impact" id="" class="form-control form-control-sm" [(ngModel)]="currentImpact">
          <option>Applicable</option>
          <option>Not Applicable</option>
          <option>FYI</option>
        </select>
      </div>
      <button type="button" (click)="updateUser()" class="btn btn-success btn-sm btn-update mr-2" *ngIf="isEdit">Update</button>
      <button type="button" (click)="cancelEdit()" class="btn btn-secondary btn-sm">Cancel</button>
    </form>
  </div> -->
</div>

db.json

{
"users": [
{
  "id": 1,
  "first_name": "Kunal",
  "last_name": "Vijan",
  "email": "[e-mail]",
  "gender": "Male",
  "ip_address": "1.1.1.1",
  "impact": "Applicable"
},
{
  "id": 2,
  "first_name": "Kunal",
  "last_name": "Vijan",
  "email": "[e-mail]",
  "gender": "Male",
  "ip_address": "1.1.1.1",
  "impact": "Not Applicable"
},
{
  "id": 3,
  "first_name": "Kunal",
  "last_name": "Vijan",
  "email": "[e-mail]",
  "gender": "Male",
  "ip_address": "1.1.1.1",
  "impact": "FYI"
}
]
}

推荐答案

问题出在您的批处理更新功能中.您填充 batchUpdateUserList ，然后将 this.userObj 发送到服务器. this.userObj 是一条记录，不会为您提供所需的批处理更新.

The problem is in your batch update function. You populate the batchUpdateUserList but then you send the this.userObj to the server. The this.userObj is a single record and is not going to give you the batch update you want.

  batchUpdateUser() {
    this.isBatchEdit = false;
    const batchUpdateUserList = []; // objects to 
    this.allUser.forEach(user => {
      if (user.checked) {
        user.impact = this.currentImpact
        batchUpdateUserList.push(user);
        user.checked = false;
      }
    });

    this.commonService.updateUser(this.userObj).subscribe(() => {
      this.getLatestUser();      
    }); 
  }

我在函数中有一条评论，说您需要为服务器创建一个新的 this.commonService.batchUpdate()调用，但是如果无法创建一个新的调用来发送要更新的用户列表，则可以执行以下操作

I had a comment in the function that was saying you need to create a new this.commonService.batchUpdate() call for the server, but if is not possible to create a new call that sends a list of users for update, then you can do the following

  batchUpdateUser() {
    this.isBatchEdit = false;
    const batchUpdateUserList = []; // objects to 
    this.allUser.forEach(user => {
      if (user.checked) {
        user.impact = this.currentImpact
        batchUpdateUserList.push(user);
        user.checked = false;

        this.commonService.updateUser(user).subscribe();
      }
    });

    this.getLatestUser();   
  }

，但不建议这样做，因为对于大型更新而言，这会很慢且容易出错.您可以使用 forkJoin 来解决此问题，但是如果您要创建一个将列表发送到服务器进行更新的新服务，则更可取.您可以查看 stackblitz 对于该示例，但由于该项目未连接到服务器，因此我未使用此代码对其进行更新.

but it is not recommended because this is going to be slow and buggy for large updates. You can use a forkJoin to solve this issue, but it would prefered if you would create a new service that sends a list to the server for update. You can look at the stackblitz for the example but I didn't update it with this code because the project isn't connected to a server.

这篇关于如何添加功能以一次将多个记录从angular更新到json的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！