标签: angular7

我需要帮助，我需要按 PendingQuantity 字段对数组进行排序。我有负数和正数。所以我的代码：

this.data.Products.sort(obj => obj.PendingQuantity);

所以我的数组

"Products": [
            {
                "ProductCode": "MC30180",
                "Description": "Description_1",
                "NationalCode": "N.C. 0965",
                "PendingQuantity": 20,
                "toBeScanned": true
            },
            {
                "ProductCode": "Name_2",
                "Description": "Description_2",
                "NationalCode": "N.C. 0382",
                "PendingQuantity": -3,
                "toBeScanned": false
            },
            {
                "ProductCode": "Name_3",
                "Description": "Description_3",
                "NationalCode": "N.C. 8913",
                "PendingQuantity": 25,
                "toBeScanned": false
            }
        ]

我想要的顺序是：

"Products": [
                {
                    "ProductCode": "MC30180",
                    "Description": "Description_1",
                    "NationalCode": "N.C. 0965",
                    "PendingQuantity": -3,
                    "toBeScanned": true
                },
                {
                    "ProductCode": "Name_2",
                    "Description": "Description_2",
                    "NationalCode": "N.C. 0382",
                    "PendingQuantity": 25,
                    "toBeScanned": false
                },
                {
                    "ProductCode": …

我在我的 Angular7 应用程序中使用了一个带有 firebase 的 mat-table 并成功填充了它。我想添加一个自动递增的序列号。

我的代码的Html：

<mat-table #table2 [dataSource]="dataSource2" matSort>
 <ng-container matColumnDef="sn">
 <mat-header-cell *matHeaderCellDef mat-sort-header> SN. </mat-header-cell>
 <mat-cell *matCellDef="let element; let i = index;">{{i+1}}</mat-cell>
  </ng-container>
 <ng-container matColumnDef="description">
 <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.description}} </mat-cell>
  </ng-container>
 <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>

分页问题

• 当我转到下一页时，索引再次从一个开始。
• 如果我每页显示 5 个项目，那么在转到下一页后，它从一个而不是 6 个开始。

我试图从我的前端部署/pod（在 NGINX 中运行的 Angular 7 应用程序）向我的后端服务（NET Core WEB API）发出一个 http 请求。

URL，如图所示，是http://k8s-demo-api:8080/api/data。

//environment.prod.ts in Angular App

export const environment = {
  production: true,
  api_url: "http://k8s-demo-api:8080/api"
};

我的 API 中启用了 CORS：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using K8SDockerCoreWebApi.Contexts;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;

namespace K8SDockerCoreWebApi
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // …

我已经将我的项目从 cli 5 升级到 cli 7，但我遇到了一些问题

import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'
import { Observable, Subscription } from 'rxjs/Rx';

@Component({
  selector: 'countdown',
  template: '{{ countDown | async | formatTime }}'
})
export class CountdownComponent implements OnInit {
  @Input() seconds: string;
  @Output() checkTime: EventEmitter<number> = new EventEmitter();
  countDown: any;

  constructor() {}

  ngOnInit() {
    const start = parseInt(this.seconds, 10);
    this.countDown = Observable.timer(0, 1000)
                .map(i => start - i) // decrement the stream's value and return
                .takeWhile(i => i …

我有日历组件，其数据属性装饰为 @Input():

import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit, OnChanges {
  @Input() data: CalendarDay[];

  constructor() {
    this.data = [];
  }

  ngOnInit() {
    this.initDays();
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(this.data);
    console.log(changes.data);
  }
}

我从另一个组件传入数据，如下所示：

<app-calendar [data]="this.calendarData"></app-calendar>

并通过*ngFor日历组件呈现传递的数据（它呈现完美并且一切正常）：

<div *ngFor="let item of data">{{item.date}}</div>

我想先解析这些数据，然后再将它渲染到视图中，每当我尝试在日历组件中使用 console.log 数据属性时，我都会得到奇怪的数组，它显示为空，我可以从浏览器控制台“打开”它：

.

当我尝试记录这样的值时：

console.log(this.data[0])

或者

console.log(changes.data.currentValue[0])

我得到了undefined价值。

我想根据屏幕宽度在桌面和移动模板之间切换，以确保我的应用程序具有响应性。我正在尝试执行以下操作：

@Component({
    selector: 'app-root',
    templateUrl: "./" + (window.innerWidth < 768) ? "app.component.html" : "app.component.mobile.html",
    styleUrls: ['./app.component.css']
})

但是，这是行不通的。代替模板加载，字符串"app.component.html", 出现在屏幕上。

更有趣的是，如果我使用以下内容：

@Component({
    selector: 'app-root',
    templateUrl: "./" + (false) ? "app.component.html" : "app.component.mobile.html",
    styleUrls: ['./app.component.css']
})

该页面仍然只显示字符串"app.component.html"。

是否不支持使用条件语句作为装饰器中templateUrl字段的值@Component？

如果不是，我可以使用什么替代解决方案来实现这种仍然是模块化的并遵循最佳实践的响应水平？

更新：我通过使用ng serve --aot而不仅仅是ng serve. 但是，我决定不考虑这个想法，因为它不会在窗口调整大小时切换模板。

在我的项目中，我在 tsconfig.json 中Angular-7启用ivy后使用显示错误

我的tsconfig.json文件：

{
     "compileOnSave": false,
     "compilerOptions": {
          "baseUrl": "./",
          "outDir": "./dist/out-tsc",
          "sourceMap": true,
          "declaration": false,
          "moduleResolution": "node",
          "emitDecoratorMetadata": true,
          "experimentalDecorators": true,
          "target": "es5",
          "typeRoots": [
               "node_modules/@types"
          ],
          "lib": [
               "es2017",
               "dom"
          ]
     },
     "angularCompilerOptions": {
          "enableIvy": true
     }
}

在我的项目中，我使用了BsDatepickerModuleModule。

如何解决这个问题？

我正在我的组件 html（角度版本 7）中设置 fullCalendar v4，但似乎无法使用自定义按钮。

我尝试了各种不同的语法组合，但还没有找到正确的组合。我也去了FC提供的demo项目，没找到自定义按钮的例子。

组件.html

<full-calendar
            #calendar
            defaultView="dayGridMonth"
            [customButtons]="{
                            filter: {
                            text: 'filter',
                            click: 'open()'
                            }
                        }"
            [header]="{
                center: 'title',
                left: 'filter,dayGridMonth,timeGridWeek,timeGridDay',
                right: 'prev, next today'
            }"
            [plugins]="calendarPlugins"
            [events]="selectedEvents"
                         ></full-calendar>

            <!-- <div class="col col-md-offset-1">
                <div class="card card-calendar">
                    <div class="card-content">
                        <div id="fullCalendar"></div>
                    </div>
                </div>
            </div> -->
        </div>

比较

open() {
        var type = '';
        var content = this.login;
        this.getLocationBatches();
        this.getRooms();
        if (type === 'sm') {
            console.log('aici');
            this.modalService.open(content, { size: 'sm' }).result.then(
                result => {
                    this.closeResult = `Closed with: ${result}`; …

我已经构建了一个 Angular 7 应用程序，当我ng serve使用 docker 从本地机器运行命令时，该应用程序可以正常工作。这是一个简单的 hello world angular 应用程序（没有数据库）。

当我尝试在 GCP Cloud Run 上托管我的应用程序时。它给了我端口错误。

云运行错误：

无法启动然后侦听由 PORT 环境变量定义的端口。

ERROR: (gcloud.beta.run.deploy) Cloud Run error: Container failed to start. Failed to start and then listen on the port defined by the PORT environment variable. Logs for this revision might contain more information.
Deployment failed
Creating Revision......failed
Setting IAM Policy...............done
Deploying...
Deploying container to Cloud Run service [test-case-builder] in project [test-case-builder] region [us-central1]
Already have image (with digest): gcr.io/cloud-builders/gcloud …

我正在尝试在我的代码中实现这个angular-upload-file-with-progress-bar 的Stackblitz 示例

export class UploadDocumentTemplateComponent extends FieldType {}

我有这条线是因为我收到了这个错误

错误 TS2377：派生类的构造函数必须包含“超级”调用。

如何解决这个问题？