Question

我使用Angular + Electron创建了一个应用程序。然后的问题是我的组件的视图在必须显示数据时加载得很好：

但是当我做类似更改屏幕尺寸的操作时会这样做：

我组件的数据流是： MySQL-> MainJS->服务（可观察）->数据源->组件-> HTML

代码如下：

MAINJS

const { app, BrowserWindow, ipcMain } = require('electron');
const mysql = require('mysql');

const connection = mysql.createConnection({
  host: '127.0.0.1',
  port: '3306',
  user: 'admin',
  password:'admin',
  database: 'christmas'
});

connection.connect(function(error){
  if(error){
    console.log(error.code);
    console.log(error.fatal)
  }
});

exports.conexion=connection;

ipcMain.on('conexionBDAs', (event,arg)=>{
  connection.query(arg, (error, resultado, opciones)=>{
    if(error){
      console.log(error);
      console.log(arg)
    }

    if(resultado){
      event.sender.send('resultado', resultado[0]);
    }else{
      console.log("No hay datos para mostrar");
      event.sender.send('resultado', [])
    };
  })
})

服务

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
import {ElectronService} from 'ngx-electron';

@Injectable()

export class GiftService{

  public Data= new BehaviorSubject<any>([]);

  constructor(
    private Electron: ElectronService
  ){ };

  Request(){
    let query = 'CALL sp_giftlist()';
    this.Electron.ipcRenderer.send('conexionBDAs', query)
  }

  Response():Observable<any>{
    this.ListarObsequios2();
    this.Electron.ipcRenderer.once('resultado', (event,res)=>{
      this.Data.next(res);
    });
    return this.Data
  }
}

数据源

import {CollectionViewer, DataSource} from "@angular/cdk/collections";
import {BehaviorSubject, Observable} from "rxjs";
import {GiftService} from './gift.service';
import {catchError} from "rxjs/operators";

export class GiftDataSource implements DataSource<any>{

  private LoadingData = new BehaviorSubject<boolean>(false);
  public Loading = this.CargandoData.asObservable();

  constructor(private Service: GiftService){ }

  connect (collectionViewer: CollectionViewer):Observable<any>{
    return this.Service.Data.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void{
    this.Service.Data.complete();
    this.LoadingData.complete()
  }

  LoadData(){
    this.LoadingData.next(true);
    this.Service.Response()
    .pipe(catchError(() => of([])))
    .subscribe(res => {
      this.LoadingData.next(false)
    });
  }
}

组件：

import {Component, OnInit} from '@angular/core';
import {GiftDataSource} from './obsequio.data.service';
import {GiftService} from './gift.service';

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

  GiftData: GiftDataSource;
  Columnas= ['numero','obsequio', 'regla', 'tipo_regla','total', 'opciones'];

  constructor(
    private Service: GiftService,
  ) { }

  ngOnInit() {
    this.GiftData = new ObsequioData(this.Service);
    this.GiftData.LoadData()
  }
}

HTML

 <mat-card>

    <mat-card-content>

      <div class="spinner-container" *ngIf="GiftData.Loading | async">
        <mat-spinner></mat-spinner>
      </div>

      <mat-table [dataSource]="GiftData">

        <ng-container matColumnDef="numero">
            <mat-header-cell *matHeaderCellDef>N°</mat-header-cell>
            <mat-cell *matCellDef="let gift">{{gift.numero}}</mat-cell>
        </ng-container>

          <ng-container matColumnDef="obsequio">
              <mat-header-cell *matHeaderCellDef>Nombre</mat-header-cell>
              <mat-cell *matCellDef="let gift">{{gift.obsequio}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="regla">
              <mat-header-cell *matHeaderCellDef>Regla</mat-header-cell>
              <mat-cell *matCellDef="let gift">{{gift.regla}}</mat-cell>
          </ng-container>

          <ng-container matColumnDef="tipo_regla">
              <mat-header-cell *matHeaderCellDef>Tipo de regla</mat-header-cell>
              <mat-cell *matCellDef="let gift">
                {{gift.regla_monto | currency:'S/.'}}{{gift.marca}}
              </mat-cell>
          </ng-container>

          <ng-container matColumnDef="total">
              <mat-header-cell *matHeaderCellDef>Total</mat-header-cell>
              <mat-cell *matCellDef="let gift">{{gift.total}}</mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="Columnas" sticky="true"></mat-header-row>
          <mat-row *matRowDef="let row; columns: Columnas"></mat-row>

      </mat-table>
    </mat-card-content>

</mat-card>

希望你们能帮助我。我非常感激：D！

Angular + NodeJS（电子）：渲染过程在组件启动时崩溃

0 个答案: