（三）组织显示列表等前端处理（angular)

最新推荐文章于 2021-03-10 14:07:40 发布

yyc_ssasd

最新推荐文章于 2021-03-10 14:07:40 发布

阅读量262

点赞数

分类专栏： # netcore 文章标签： netcore

本文链接：https://blog.csdn.net/yuyanchuan/article/details/105510501

版权

netcore 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

用于处理组织的录入/显示/明细等处理，使用angular开发，组件采用angular-material显示。

1、创建工程

使用ng new scmproject创建工程
ng g c 创建模块
ng g s 创建服务
目录结构基本如下：
在这里插入图片描述

2 实现服务

实现lsbzdw的服务，获取netcore后端提供的服务数据
在服务中主要实现了获取全部信息/获取单个信息/保存单据信息

import { add_lsbzdw } from 'src/app/Models/lsbzdw/add-lsbzdw';
import { HttpHeaders, HttpClient, HttpErrorResponse  } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';

import { map, catchError } from 'rxjs/operators';

import { lsbzdw } from '../Models/lsbzdw/lsbzdw';

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

  constructor(private http: HttpClient) { }
  
  public domainInfo = 'https://localhost:5001/api/lsbzdw';

  public httpOptions = {
    headers: new HttpHeaders({'Content-Type': 'application/json'})
  };

  /*获得所有的组织信息*/
  getAll(): Observable<lsbzdw[]>
  {
    return this.http.get(this.domainInfo).pipe(map(response =>{
      let lsbzdws = response as lsbzdw[];
      console.log(lsbzdws);
      return lsbzdws;
    }));
  }

  save(ad: add_lsbzdw): Observable<add_lsbzdw> {
    return  this.http.post<add_lsbzdw>(this.domainInfo,JSON.stringify(ad),this.httpOptions)
     .pipe(catchError(this.handleError));
  }

  private handleError(error: HttpErrorResponse) {
    console.log(' an error occured ', error.error);
    return throwError('error ocurred ');
  }

  /*获取某个核算组织信息*/
  getById(id: number): Observable<lsbzdw>
  {
    return this.http.get(this.domainInfo + '/' + id)
      .pipe(map(resp => {
        let res = resp as lsbzdw;
        return res;
      }));
    
  }
}

3 处理显示模块

<button mat-button [routerLink]="['/add-lsbzdw']" routerLinkActive="router-link-active" >新增核算组织</button>
<table mat-table [dataSource]="lsbzdws" class="mat-elevation-z8">
    <ng-container matColumnDef="ID">
        <th mat-header-cell *matHeaderCellDef> ID </th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
      </ng-container>
      <ng-container matColumnDef="Code">
        <th mat-header-cell *matHeaderCellDef> 编号 </th>
        <td mat-cell *matCellDef="let element"> {{element.code}} </td>
      </ng-container>
      <ng-container matColumnDef="Name">
        <th mat-header-cell *matHeaderCellDef> 名称 </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="createTime">
        <th mat-header-cell *matHeaderCellDef> 创建日期 </th>
        <td mat-cell *matCellDef="let element" > {{element.createTime}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="OnClick(row)"></tr>
</table>

要是用angular-material，可以参照官方文档安装angular-material
安装完成后，比如要使用mat-button的话，需要参照官方文档将api引入。
在这里插入图片描述
我是在app.module.ts中引入了material的组件。

import {MatButtonModule} from '@angular/material/button';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatMenuModule} from '@angular/material/menu';
import {MatTableModule} from '@angular/material/table';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatInputModule } from '@angular/material/input';
import {MatIconModule} from '@angular/material/icon';
import {MatFormFieldModule} from '@angular/material/form-field';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatToolbarModule,
    MatMenuModule,
    HttpClientModule,
    MatTableModule,
    MatSidenavModule,
    MatInputModule,
    MatIconModule,

列表显示ts

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { lsbzdw } from 'src/app/Models/lsbzdw/lsbzdw';
import { LsbzdwService } from 'src/app/services/lsbzdw.service';
import { SelectionModel } from '@angular/cdk/collections';

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

  public displayedColumns: string[] = ['Code', 'Name', 'createTime'];

  public lsbzdws : lsbzdw[];

  public detailInfo : lsbzdw;

  selection = new SelectionModel<lsbzdw>(true, []);// 一个select的对象

  constructor(private lsbzdwservice: LsbzdwService,
              private router: Router) 
              { 
                this.getInfo();
              }

  ngOnInit(): void {
    this.getInfo();
  }

  getInfo(): void {
    this.lsbzdwservice.getAll().subscribe(lsbzdwinfos => this.lsbzdws = lsbzdwinfos);
  }

  OnClick(row: any){
    //console.log(row);
    let currentrow = row as lsbzdw;
    this.lsbzdwservice.getById(row['id'] as number).subscribe(infos => this.detailInfo = infos);
    this.router.navigate(['lsbzdwdetail'],{queryParams:{id:row["id"]}});
  }
}

4 测试

在这里插入图片描述

5 新增组织

创建add-lsbzdw模块
实现添加模块功能

import { Router } from '@angular/router';
import { LsbzdwService } from 'src/app/services/lsbzdw.service';
import { Component, OnInit } from '@angular/core';
import { add_lsbzdw } from 'src/app/Models/lsbzdw/add-lsbzdw';

@Component({
  selector: 'app-add-lsbzdw',
  templateUrl: './add-lsbzdw.component.html',
  styleUrls: ['./add-lsbzdw.component.css']
})
export class AddLsbzdwComponent implements OnInit {

  value: string;

  constructor(private lsbzdwService: LsbzdwService,
              private router: Router) { }

  ngOnInit(): void {
  }
  Save(value){
    let add_lsbzdw = value as add_lsbzdw;
    if(add_lsbzdw.code === '' || add_lsbzdw.name === '') {
      return;
    }
    console.log(add_lsbzdw);
    this.lsbzdwService.save(add_lsbzdw).subscribe();
    this.router.navigate(['/lsbzdw']);
  }
}

前端显示代码

<form (ngSubmit)="Save(formCont.value)" #formCont="ngForm">
   <div class="example-container">
      <mat-form-field>
         <input id="code" name= "code"  ngModel matInput placeholder="编号" required>
      </mat-form-field>
   </div>
   <div class="example-container">
      <mat-form-field>
         <input id="name" name="name" ngModel  matInput placeholder="名称" required>
      </mat-form-field>
   </div>
   <div class="example-container">
      <button mat-button>保存</button>
   </div>
</form>

这里主要使用了ngForm，使用了ngForm.value来实现数值的传递和绑定。
如在保存方法中直接获取form的value值来处理

Save(value){
    let add_lsbzdw = value as add_lsbzdw;
    if(add_lsbzdw.code === '' || add_lsbzdw.name === '') {
      return;
    }
    console.log(add_lsbzdw);
    this.lsbzdwService.save(add_lsbzdw).subscribe();
    this.router.navigate(['/lsbzdw']);
  }

此外这里还使用了router来进行保存后将导航切换到首页列表。

6 点击显示明细信息

在显示列表中增加了点击显示明细信息的功能

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="OnClick(row)"></tr>

在click功能中处理了点击操作。将当前行的id信息传到到lsbzdwdetail模块组件中

OnClick(row: any){
    //console.log(row);
    let currentrow = row as lsbzdw;
    this.lsbzdwservice.getById(row['id'] as number).subscribe(infos => this.detailInfo = infos);
    this.router.navigate(['lsbzdwdetail'],{queryParams:{id:row["id"]}});
  }

lsbzdwdetail组件解析传递的参数id，然后根据id获取当前组织的详细信息

import { LsbzdwService } from 'src/app/services/lsbzdw.service';
import { lsbzdw } from 'src/app/Models/lsbzdw/lsbzdw';
import { Component, OnInit, Input, Injector } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

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

  detailsInfo: lsbzdw;

  public numbers: string;

  Id: string;
  Code: string;
  Name: string;
  createTime: Date;

  constructor(
    injector: Injector,
    private activatedRouter: ActivatedRoute,
    public router: Router,
    public  lsbzdservice: LsbzdwService) { 
  }


  ngOnInit(): void {
    this.activatedRouter.queryParams.subscribe(queryParams=>{
      console.log('---------------');
      console.log(queryParams);
      this.numbers= queryParams.id;
    });

    console.log(this.numbers);

    this.getDetail(this.numbers as unknown as number);
    console.log(this.detailsInfo);


  }

  getDetail(id: number){
    this.lsbzdservice.getById(id).subscribe(resp => {
      console.log(resp);
      this.detailsInfo = resp;
      console.log("__________");
      console.log(this.detailsInfo);
      this.Id = this.detailsInfo.id;
      console.log("+++++");
      console.log(this.Id);
      this.Code = this.detailsInfo.code;
      this.Name=this.detailsInfo.name;
      this.createTime=this.detailsInfo.createTime;
    });
  }

}

然后将获取到的详细信息绑定到显示页面上

<form  #formCont="ngForm">
    <div class="example-container">
        <mat-form-field>
           <input id="id" name= "id"  [ngModel]="Id" matInput placeholder="ID" disabled>
        </mat-form-field>
     </div>
    <div class="example-container">
       <mat-form-field>
          <input id="code" name= "Code"  [ngModel]="Code" matInput placeholder="编号">
       </mat-form-field>
    </div>
    <div class="example-container">
       <mat-form-field>
          <input id="name" name="Name" [(ngModel)]="Name"  matInput placeholder="名称">
       </mat-form-field>
    </div>
    <div class="example-container">
        <mat-form-field>
            <input id="createTime" name="createTime"  [(ngModel)]="createTime"  matInput placeholder="创建日期" disabled>
        </mat-form-field>
    </div>
    <div >
       <button mat-button-raised >修改保存</button>
       <button mat-raised-button color="warn">删除</button>
    </div>
 </form>