角度扫描仪

Question

有人可以帮助我完成我的项目吗？我这里有一个扫描仪设备。当我以角度扫描时，Schoolid 未正确显示，但在记事本中时，它是正确的 const ScandData = 'StudentNumber:124452';是我的例子。谢谢。 我的 Schoolid 有二维码...我很抱歉，如果我输入整个代码，它不知道该怎么做以及如何修复它

import { Component, Inject, Input } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { LockerApiService } from 'src/app/locker-services/locker-api.service';

@Component({
  selector: 'app-locker-popup-details',
  templateUrl: './locker-popup-details.component.html',
  styleUrls: ['./locker-popup-details.component.scss']
})
export class LockerPopupDetailsComponent {
  lockerInfo: any;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: any,
    private lockerApiService: LockerApiService
  ) {
    this.lockerInfo = data.locker; // Update to use lockerInfo instead of locker
  }

  scanQRCode(): void {
    this.lockerApiService.scanQRCode(this.lockerInfo.Id, 'StudentNumber:123456').subscribe((response: any) => {
      console.log('Scanned QR code for locker:', this.lockerInfo.Id);
      this.lockerInfo.status = 'Occupied';
      this.lockerInfo.studentNumber = response.studentNumber;

}, (error: any) => {
      console.error('Error scanning QR code:', error);
    });
  }
}


<div class="record">
  <h2 mat-dialog-title>LOCKER INFORMATION</h2>
  <table class="table">
    <tr>
      <th>Locker Number</th>
      <td>{{ lockerInfo.lockerNumber }}</td>
    </tr>
    <tr>
      <th>Name</th>
      <td>{{ lockerInfo.name }}</td>
    </tr>
    <tr>
      <th>Student Number</th>
      <td>{{ lockerInfo.studentNumber }}</td>
    </tr>
    <tr>
      <th>College Program</th>
      <td>{{ lockerInfo.collegeProgram }}</td>
    </tr>
    <!-- <tr> 
      <th>Year</th>
      <td>{{ lockerInfo.year }}</td>
    </tr> -->
    <tr>
      <th>Gender</th>
      <td>{{ lockerInfo.gender }}</td>
    </tr>
    <tr>
      <th>Status</th>
      <td>{{ lockerInfo.status }}</td>
    </tr>
  </table>
  <button (click)="scanQRCode()">Scan ID QR Code </button>

</div>


  scanQRCode(lockerNumber: number, scannedData: string): Observable<any> {
    console.log('Scanning QR code for locker:', lockerNumber);
    return this.http.post(`${this.apiUrl}/api/locker/${lockerNumber}/scan`, { scannedData });
  }

我尝试安装 qrscanner 库，但它不起作用

Answer 1

如果你在控制台中看到一些，问题是你需要使用 ngZone 来表示 Angular 在“角度环境”之外进行了一些更改（通常在使用事件 javascript 时）

constructor(private ngZone:NgZone){}

...
this.lockerApiService.scanQRCode(this.lockerInfo.lockerNumber, scannedData).subscribe((response: any) => {
      if (response && response.scannedData) {
        this.ngZone.run(()=>{
           const scannedDataParts = response.scannedData.split('#');
           const studentNumber = scannedDataParts[1].split(':')[1];
           console.log('Locker information updated:', { id: this.lockerInfo.id, lockerNumber: this.lockerInfo.lockerNumber, studentNumber });
           this.dialogRef.close('scanned'); // Close the dialog with 'scanned' as the result
          })
         } else {
        console.error('Invalid scanned data format:', response);
      }

否则，如果您的 lockerApiService.scanQRCode 是主题，请尝试在服务中使用 ngZone

  ngZone.run(()=>{
     this.scanQRCode.next(...your value...)
  })

如果在任何情况下您在控制台中看不到任何内容，那是因为它不起作用。更新问题，添加有关您的服务的信息