#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 —prod, поле licitacion не отображается, как показано на скриншоте ниже
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>