Angular-“给定的数据无效。”，错误：client_id“客户端ID必须是字符串。”

时间：2019-10-03 13:10:48

标签： angular laravel api

我正在使用Angular-7前端和Laravel-5.8后端开发应用程序。对于用户管理，我正在使用Laravel Spatie。我有这两个表：

表格：

CREATE TABLE `client` (
`id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`client_id` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`client_name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;


CREATE TABLE `users` (
`id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`email` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`password` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
`client_id` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

我有两个类：用户和客户端，来自上表I。

  1. 每个用户都属于一个客户端，但不超过一个。
    2. 客户端中的
  2. client_id也是主键。

Laravel

UserController 

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Carbon\Carbon;
use App\User;
use App\Client;
use Spatie\Permission\Models\Role;
use Spatie\Permission\Models\Permission;
use App\Notifications\SignupActivate;
use Avatar;
use Storage;
use App\Guardian;

class UsersController extends Controller
{

public function update(Request $request, $id)
{
    if(!Auth::user()->hasPermissionTo('Edit Users') && !Auth::user()->id==$id)
        return response()->json([ "message" => 'User do not have permission'], 401);
    $rules = [
        'name' => 'required|min:2',
        'client_id' => 'string'
    ];

    $this->validate($request, $rules);

    $user = User::findOrFail($id);


    if($request->role){
        foreach($user->roles as $role)
            $user->removeRole($role);
        foreach($request->role as $role)
            $user->assignRole($role);
    }

    $user->name = $request->name;
    $user->client_id = $request->client_id;
    $user->save();

    return response()->json(['data' => $user], 201);
}
}

ClientController 

public function clientAll()
{
    return response()->json(Client::all());
}

在更新用户数据期间，我希望有一个下拉选择选项，其中填充了来自client表的client_id / client_name。这样我就可以使用client_id更新用户表。

api.php 

Route::group([
'middleware' => 'auth:api'
], function () {
Route::resource('users', 'UsersController', ['only' =>        ['index', 'show', 'store', 'update', 'destroy']]);
});

Route::group([
'middleware' => 'auth:api'
], function () {
Route::get('client/clientall', 'ClientController@clientAll');
Route::resource('client', 'ClientController', ['only' =>    ['index', 'show', 'store', 'update', 'destroy']]);
});

user.component.ts 

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../../../shared/services/api.service';
import { SnotifyService } from 'ng-snotify';
import { Router, ActivatedRoute } from '@angular/router';
import {NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap';

import { TokenService } from '../../../shared/services/token.service';
import { RolesCheckService } from 'src/app/shared/services/roles-check.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit {

users = null;     //Store Users Data
roles = null;     //Store all roles Data
clients = null;

public error = {
'role' : null,
'email' : null,
'client_id' : null,
'name' : null,
'password' : null
};
   //Form errors
 keyword = null;   //Current Search Keyword
 pagination = {    //Current Pagination data
'page' :  '1',
'max' : '10'
}
 role = null;
 User = 'User';

data = {          //User Update Data
 "id" : null,
 "name" : null,
 "client_id" : null,
 "role" : []
}

form = {         //New User add Data
  'name' : null,
  'email' : null,
  'client_id' : null,
  'password' : null,
  'password_confirmation' : null,
  'role' : []
 }

 headers = {     //Token for API Authorization
 'Authorization' : this.token.get(),
 'X-Requested-With' : 'XMLHttpRequest'
  }

  sortData = {        //Current Sort Data
   "col" : null,
   "order" : null
  }

 isSuperAdmin = false;

 constructor(private roleManage : RolesCheckService , private route : ActivatedRoute, private pg:   NgbPaginationConfig, private token : TokenService, private http : HttpClient, private router :    Router,private api : ApiService, private notify : SnotifyService) {
  pg.boundaryLinks = true;
  pg.rotate = true;
  }

 ngOnInit() {

 console.log('isSuperAdmin: ' + this.roleManage.isSuperAdmin);
 this.isSuperAdmin = this.roleManage.isSuperAdmin;
 this.route.queryParams.subscribe(params => {
   if(params['role']){
    this.role = params['role'];
    this.User = this.role;

  } else {
    this.User = 'User';
    this.role = '';
  }
})
this.notify.clear();
this.notify.info("Loading...", {timeout: 0});

if(this.keyword) {
  this.api.get('users?search=' + this.keyword + '&page=' + this.pagination.page + '&sort=' + this.sortData.col + '&order=' + this.sortData.order + '&role=' + this.role, this.headers).subscribe(
    data => this.datahandler(data),
    error => { this.notify.clear(); console.log(error); this.notify.error(error.error.message); }
  );
} else {
  this.api.get('users?page=' + this.pagination.page + '&sort=' + this.sortData.col + '&order=' + this.sortData.order + '&role=' + this.role, this.headers).subscribe(
    data => this.datahandler(data),
    error => { console.log(error); this.notify.error(error.error.message); }
  );
}
this.api.get('role', this.headers).subscribe(
  data => { console.log(data); this.roles=data; },
  error => { console.log(error); this.notify.clear(); this.notify.error(error.error.message); }
);
this.api.get('client/clientall', this.headers).subscribe(
  data => this.clients = data,
  error => { this.notify.error(error.error.message) }
 );
}


 datahandler(data){
  console.log(data.data);
  this.notify.clear();
  this.users = data.data;
  this.pagination.max = data.total;
}

//sort handler
sort(col){
 console.log(col);
 if(this.sortData.order=="asc" && this.sortData.col==col){
  this.sortData.order = "desc"
 } else if(this.sortData.order=="desc" && this.sortData.col==col){
  this.sortData.order = null;
  col = null;
 } else {
  this.sortData.order = "asc"
 }
 this.sortData.col = col;
 this.ngOnInit();
}

//Paginate Handling
 paginateClick(page){
  console.log(page);
  this.pagination.page = page;
  this.ngOnInit();
 }

 //Serach Handling
 search(){
 this.ngOnInit();
 }

//Pause or Active User Handling
 pause(id){
 this.notify.clear();
 console.log(id);
 var body = {
  "id" : id
 }
 return this.api.post('users/pause', body, this.headers).subscribe(
  data => {this.notify.info("Success", {timeout: 2000}); this.ngOnInit(); },
  error => this.notify.error(error.message, {timeout: 0})
  );
 }

//User edit Handling
edit(id){
 this.notify.clear();
 this.data.name = null;
 this.data.role = [];
 this.api.get('users/'+id, this.headers).subscribe(
   data => this.editDataHandler(data),
   error => this.notify.error("User Not Found", {timeout: 0})
 );
 this.data.id = id;
 var modal = document.getElementById('editModal');
 modal.style.display = "block";
}

editDataHandler(data){
 console.log(data);
this.data.name = data.name;
for(var i=0; i<data.roles.length; i++)
  this.data.role.push(data.roles[i].name);
}

 checkbox(event){
   if(event.srcElement.checked){
   this.data.role.push(event.srcElement.name);
  } else {
   var index =this.data.role.indexOf(event.srcElement.name);
   this.data.role.splice(index, index+1);
  }
  console.log(this.data.role);
 }

editsubmit(){
  this.notify.clear();
  this.notify.info("Wait...", {timeout: 0});
  this.api.put('users/'+this.data.id, this.data, this.headers).subscribe(
   data => {
    this.notify.clear();
    this.notify.info("User Updated Successfully", {timeout: 2000});
    this.ngOnInit();
    this.closeEditModal();
  },
  error => { this.notify.clear(); this.error = error.error.errors; }
 );
}

closeEditModal(){
 this.error = {
  'role' : null,
  'email' : null,
  'client_id' : null,
  'name' : null,
  'password' : null
 };
 var modal = document.getElementById('editModal');
 modal.style.display = "none";
}

//User delete Handling
delete(id){
 this.notify.clear();
 this.notify.warning('Are you sure you want to detele this User?', 'Delete User', {
  timeout: 0,
  showProgressBar: false,
  closeOnClick: true,
  pauseOnHover: true,
  buttons: [
    {text: 'Yes', action: () => {
      var headers = {
        'Authorization' : this.token.get()
      }
      return this.api.delete('users/'+id, headers).subscribe(
        data => {this.notify.info("Success", {timeout: 2000}); this.ngOnInit(); },
        error => this.notify.error(error.message, {timeout: 0})
      );
    }, bold: false},
    {text: 'No'}
  ]
 });
}

//New User add Handling
add(){
 this.notify.clear();

 this.form.name = null;
 this.form.email = null;
 this.form.password = null;
 this.form.password_confirmation = null;
 this.form.role = [];

 var modal = document.getElementById('addModal');
 modal.style.display = "block";
}


checkboxAdd(event){
  if(event.srcElement.checked){
    this.form.role.push(event.srcElement.name);
  } else {
    var index =this.form.role.indexOf(event.srcElement.name);
    this.form.role.splice(index, index+1);
  }
  console.log(this.form.role);
 }

  addModalSubmit(){
   this.notify.clear();
   this.notify.info("Wait...", {timeout: 0});
   this.api.post('users', this.form, this.headers).subscribe(
    data => {
     this.notify.clear();
     this.notify.info("User Added Successfully", {timeout: 2000});
    this.ngOnInit();
    this.closeAddModal();
   },
   error => { this.notify.clear(); this.error = error.error.errors; }
  );

 }

 closeAddModal(){
  this.error = {
   'role' : null,
   'email' : null,
   'client_id' : null,
   'name' : null,
   'password' : null
  };
 var modal = document.getElementById('addModal');
 modal.style.display = "none";
}
}

user.component.html 

<div id="editModal" class="modal" style="background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4);">

  <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Edit User</h5>
          <button type="button" class="close" (click)='closeEditModal()'>
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div class="alert alert-danger" [hidden]="!error.role">
                {{ error.role }}
              </div>
              <div class="alert alert-danger" [hidden]="!error.name">
                  {{ error.name }}
                </div>
          <form #newUserForm=ngForm>
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Enter name"  required [(ngModel)]="data.name"/>
            </div>
            <div class="form-group">
                <label for="name">Client</label>
                <select class="form-control pt-1" name="client" [(ngModel)]="form.client_id">
                    <option *ngFor="let c of clients" value="{{c.client_id}}">{{c.client_name}}</option>
                  </select>
            </div>
            <div class="form-group">
                <label for="name">Role</label>
                <div *ngFor="let role of roles">
                    <input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkbox($event)" *ngIf="!data.role.includes(role.name)">
                  <input type="checkbox" name="{{ role.name }}" value="{{ role.name }}" (change)="checkbox($event)" *ngIf="data.role.includes(role.name)" checked> {{ role.name }}
                </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary"  [disabled]="!newUserForm.valid" (click)='editsubmit()'>Save changes</button>
          <button type="button" class="btn btn-secondary" (click)='closeEditModal()'>Close</button>
        </div>
      </div>
    </div>

</div>

当我单击“提交”按钮（“保存更改”），而不是更新用户表时，出现以下错误消息：

控制台：

console error

如何解决此错误？

0 个答案:

没有答案
相关问题
最新问题