ng build prod не возвращает поле модели

#angular #mongodb #build #angular-material #serve

#angular #mongodb #сборка #angular-материал #служить

Вопрос:

Я обнаружил, что мой проект отлично работает на моем локальном компьютере с ng serve, но когда я использую ng build prod, он не возвращает поле модели

Я использую приведенную ниже модель, которая заполняется api node.js

 export class Tenders {
    public licitacion: string
    public fecha: string
    public finaliza: string
    public producto: number
    public descrip: string
    public cantidad: number
    public unidad: string
    public costo: number
    public ultcompra: string
    public proveedor: number
    public provenom: string
    public estado: number
}
  

Я использую приведенный ниже код для заполнения таблицы.

   async pedirTenders(user) {
    if (user) {
      // console.log('Tenders')
      this.tenderService.getTenders()
      .subscribe((resp: Tenders[]) => {
        console.log(resp.Tenders)
        this.dataSource.data = resp.Tenders
        this.dataSource.sort = this.sort
        this.dataSource.paginator = this.paginator
        this.table.dataSource = this.dataSource
      })
    }
  }
  

И служба для GetHTTP

  getActives(): Observable<Tenders[]> {
    return this.http.get<Tenders[]>(this.url.baseApiUrl   'tendersactives', this.getHttpOptions())
  }
  

Когда я запускаю службу ng на своем локальном компьютере, она возвращает поле licitacion, как оно объявлено в модели
, и как это можно увидеть на скриншоте консоли ниже

с помощью ng serve

Но когда я запускаю ng —prod, поле licitacion не отображается, как показано на скриншоте ниже

с помощью ng —prod

API, используемый для обоих запросов, один и тот же

Использование package.json

 {
  "name": "comprasmat",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -o",
    "build": "ng --build --base-href /",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.1.3",
    "@angular/cdk": "^10.2.0",
    "@angular/common": "^10.1.3",
    "@angular/compiler": "^10.1.3",
    "@angular/core": "^10.1.3",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "^10.1.3",
    "@angular/localize": "^10.1.3",
    "@angular/material": "^10.2.0",
    "@angular/platform-browser": "^10.1.3",
    "@angular/platform-browser-dynamic": "^10.1.3",
    "@angular/router": "^10.1.3",
    "@mdi/angular-material": "^5.6.55",
    "@mdi/font": "^5.6.55",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
    "bootstrap": "^4.5.2",
    "jquery": "^3.5.1",
    "moment": "^2.27.0",
    "popper.js": "^1.16.1",
    "rxjs": "^6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.3",
    "@angular/cli": "^10.1.3",
    "@angular/compiler-cli": "^10.1.3",
    "@angular/language-service": "^10.0.11",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "^3.9.7"
  },
  "optionalDependencies": {
    "fsevents": "^2.1.3"
  }
}
  

Заранее спасибо за любые предложения

С уважением

Комментарии:

1. Это не асинхронная функция ….попробуйте удалить async или выполнить другое мудрое действие await соответственно: Tenders[] = this.tenderService.getTenders().toPromise();

2. Также, пожалуйста, опубликуйте свой HTML

3. Удалите async, потому что вам нужен await, если вы это сделаете. Просто оставьте его без асинхронности.

Ответ №1:

Спасибо всем, что нашли время ответить мне. Однако после добавления await к асинхронному запросу проблема не решается. Я изменил функцию get, но поле «licitacion» и все файлы, связанные с предложением, по-прежнему отсутствуют

 async pedirTenders(user) {
    if (user) {
      let resp: any = await this.tenderService.getTenders().toPromise()
      
      console.log(resp.Tenders)
      this.dataSource.data = resp.Tenders
      this.dataSource.sort = this.sort
      this.dataSource.paginator = this.paginator
      this.table.dataSource = this.dataSource
    }
  

Вот запрошенный Html-код. Я пытаюсь создать таблицу сопоставления со свернутой строкой, которая показывает подзапрос предложения.
проводная вещь — все работает идеально на моем локальном компьютере, но не в среде prod.

Еще раз спасибо

     <div class="mat-elevation-z8 table-responsive">
      <table mat-table [dataSource]='dataSource' matSort aria-label="Elements" multiTemplateDataRows class="mat-elevation-z8">
          <ng-container matColumnDef="licitacion">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Req.' : 'Order'}}</th>
            <td mat-cell *matCellDef="let element">{{element.licitacion}}</td>
          </ng-container>
  
          <ng-container matColumnDef="descrip">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Producto' : 'Product'}}</th>
            <td mat-cell *matCellDef="let element">{{element.descrip}}</td>
          </ng-container>
  
          <ng-container matColumnDef="cantidad">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Cantidad' : 'Quantity'}}</th>
            <td mat-cell *matCellDef="let element">{{element.cantidad}} {{element.unidad}}</td>
          </ng-container>
  
          <ng-container matColumnDef="fecha">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Inicio' : 'Start'}}</th>
            <td mat-cell *matCellDef="let element">{{element.fecha.substring(0,10)}}</td>
          </ng-container>
  
          <ng-container matColumnDef="finaliza">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Fin' : 'End'}}</th>
              <td mat-cell *matCellDef="let element">{{element.finaliza.substring(0,10)}}</td>
          </ng-container>
  
          <ng-container matColumnDef="estado">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>{{esp ? 'Estado' : 'State'}}</th>
              <td mat-cell *matCellDef="let element">{{esp ? estadosLicitaciones[element.estado].estadoesp : estadosLicitaciones[element.estado].estadoeng}}</td>
          </ng-container>
  
          <ng-container matColumnDef="acciones">
            <th mat-header-cell *matHeaderCellDef>{{esp ? 'Ofertas' : 'Offers'}}</th>
            <td mat-cell *matCellDef="let element">
              <!-- <button mat-icon-button color="primary" data-toggle="tooltip" title="{{esp ? 'Detalle' : 'Details'}}" (click)="element.isExpanded = !element.isExpanded"> -->
                <!-- <mat-icon>description</mat-icon> -->
                <!-- <span class="badge badge-primary badge-pill">{{element.offer.length ? element.offer.length : 0}}</span> -->
              <!-- </button> -->
            </td>
          </ng-container>
      
          <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
              <div class="example-element-detail" [@detailExpand]="element.isExpanded ? 'expanded' : 'collapsed'">
 
                <div class="container pl-0 ml-0 m-0 pb-0 pr-2 overflow-auto">
                  <table class="table" >
                    <thead class="thead-light">
                      <tr>
                        <th>{{esp ? 'Scoring' : 'Scoring'}}</th>
                        <th>{{esp ? 'Oferta' : 'Offer'}}</th>
                        <th>{{esp ? 'Usuario' : 'User'}}</th>
                        <th>{{esp ? 'Cantidad' : 'Quantity'}}</th>
                        <th>{{esp ? 'Precio' : 'Price'}}</th>
                        <th>{{esp ? 'Entrega' : 'Delivery'}}</th>
                      </tr>
                    </thead>
                    <tbody *ngFor="let offer of element?.offer;index as i">
                      <tr>
                        <td>{{i 1}}</td>
                        <td>{{offer.oferta}}</td> 
                        <td>{{offer.usuario}}</td>
                        <td>{{offer.cantidad}} {{offer.unidad}}</td>
                        <td>{{offer.precio}}</td>
                        <td class="d-flex flex-nowrap">{{offer.entrega.substring(0,10)}}</td>
                        </tr>
                    </tbody>
                  </table>
                </div>
                                    
                <div class="descrip example-element-description">
                  <div>
                    <h5 class="mt-2">{{esp ? 'Detalle' : 'Details'}} {{element.descrip}}</h5>
                    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam vel dolor laboriosam, maiores eveniet repellat at quibusdam distinctio repellendus illo quidem rerum. Aperiam aspernatur quae amet adipisci inventore maxime assumenda?</div>
                  </div>
                  
                  <ng-container *ngIf="cuenta">
                    <ng-container *ngIf="canOffer">
                      <div class="ml-auto mb-2">
                        <button mat-raised-button color="primary" (click)="makeAnOffer()">
                          <mat-icon>note_add</mat-icon>amp;nbsp; {{esp ? 'Nueva Oferta' : 'New Offer'}}
                        </button>
                      </div>
                    </ng-container>
                  </ng-container>

                </div>

              </div>
            </td>
          </ng-container>
  
          <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
          <tr mat-row *matRowDef="let element; columns: displayedColumns;"
              class="example-element-row"
              [class.example-expanded-row]="element.isExpanded"
              (click)="element.isExpanded = !element.isExpanded">
          </tr>
          <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

        </table>
    </div>