标签: angular8

嘿，试图用产品建立网站，但我无法从 productsComponent 到 ProductDetailsComponent 获取数据。请帮我。

在我的 Product.ts 我有：

    export class Product {
  id: number;
  name: string;
  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

在我的 ProductsComponenet 我有：

    import { Component } from '@angular/core';
import { Product } from '../services.service';

@Component({
  selector: 'app-services',
  templateUrl: './services.component.html',
  styleUrls: ['./services.component.css']
})
export class ServicesComponent {
  public products: Product[] = [
    new Product(1, "Product 001"),
    new Product(2, "Product 002"),
    new Product(3, "Product 003"),
    new Product(4, "Product 004"),
    new Product(5, "Product …

如何从 Angular 8 中的 Observable 获取最后一个值？

let test = new BehaviorSubject<any>('');
test.next(this.AddressObservable);

let lastValue = test.subscribe(data=>console.log(data.value));

由于某种原因它不起作用，检查调试器。

但是，这是在 html 中工作的， AddressObservable | async

尝试利用此链接，希望将值存储在变量中或显示在控制台日志中。任何更新的语法都会有所帮助。

订阅 Observable 时如何获取最后一个值？

笔记：

AddressObservable 是类型： Observable<AddressDto>

我制作了一个以巴西格式显示货币价值的管道。当刮刀一切正常。但是，在 azure 上的 DEV/Prod 环境中运行时，我收到此消息。运行时也会出现这个错误"ng serves --prod"。

这是模块中的配置

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';


registerLocaleData(localePt);


  providers: [
    {
      provide: LOCALE_ID,
      useValue: 'pt-PT'
    }
  ],

管道作为 HTML

 {{produto.valorAntesPromocao | number:'1.2-2'}}

错误信息 ：

InvalidPipeArgument: '缺少语言环境“pt-BR”的语言环境数据。' 用于管道“xl”

首先，我遇到了限制分配的问题，我尝试在此处使用以下答案解决该问题：

致命错误：在堆限制附近无效的标记压缩分配失败-离子 3 中的 JavaScript 堆内存不足

但在那之后，我有这个问题：

我没有输入这个数字 10240...我不知道这个数字来自哪里以及如何解决问题。任何的想法？

我有一个包含以下内容的解决方案

• 几个Asp.net项目（微服务和网关）

• .net Core + Angular 8（前端）

当我在 Visual Studio 中点击构建按钮时，每个项目都被构建。我创建了一个 repo 并上传了解决方案。现在我试图弄清楚如何设置管道来构建每个微服务并将它们部署到单个 Azure Web 应用程序。

我有以下用于 Angular 项目的管道。我应该像这样定义单独的任务吗？有没有办法在这里复制visual studio build？

# ASP.NET
# Build and test ASP.NET projects.
# Add steps that publish symbols, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/apps/aspnet/build-aspnet-4

trigger:
- master

pool:
  vmImage: 'windows-latest'

variables:
  solution: '**/*.sln'
  buildPlatform: 'Any CPU'
  buildConfiguration: 'Release'

steps:
- task: NuGetToolInstaller@1

- task: Npm@1
  inputs:
    command: install
    workingDir: 'd:\a\1\s\Ok.Web\ClientApp'

- task: Npm@1
  inputs:
    command: custom
    workingDir: 'd:\a\1\s\Ok.Web\ClientApp'
    customCommand: run build …

我正在使用 Angular 8 和 Angular Material 8。我的应用程序在 AppModule 中有以下代码：

{ provide: MAT_DATE_LOCALE, useFactory: "myFunctionToGetServerLanguageCode" }

其中 myFunctionToGetServerLanguageCode 是一种返回字符串的方法，如“en-US”（基于服务器）。然后，我将这个组件与来自 Angular Material 的 datepicker 和这些特定的提供者：

    providers: [
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
    { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS }
],

通过这种方式，我打算：

• 将 moment 与 datePicker 一起使用；
• 使日期选择器使用 utc+0；
• 使用与文化相同的格式；

例如，带有“en-US”的 MAT_DATE_LOCALE：如果我选择 2020 年 4 月 10 日，我预计选择器会显示“04/10/2020”（例如，“L”格式将设置为 MM/DD/YYYY ) 并发出“2020-04-10T00:00:00.000Z”

发生的情况是选择器发出“2020-04-09T23:00:00.000Z”。使用开发人员工具，发出的值是一个时刻，私有属性“_isUtc”设置为 false。

我哪里错了？

我在我的 angular 8 项目中有一个 observable，并且订阅了 ngOnInit()。

     export class ChartComponent implements OnInit {
       urlSubject: Subject<string> = new Subject();
       isLoading: BehaviorSubject<boolean> = new BehaviorSubject(false);
       chartData: BehaviorSubject<any[]> = new BehaviorSubject<any[]>([]);
       dataSubscription: Subscription;

       dataObservable: Observable<any> = this.urlSubject.pipe(
         switchMap((url: any) => this.httpClient.get<any[]>(url))
       )

       ngOnInit() {
         this.dataSubscription = this.dataObservable
          .pipe(tap(() => this.isLoading.next(true)))          
          .pipe(map((response: any) => response.result))      
          .subscribe((response: any) => this.chartData.next(response),
            () => this.isLoading.next(false),
            () => this.isLoading.next(false));

         this.urlSubject.next(this.data.settings.dataEndpoint)
      }
}

但是复杂的方法不会触发订阅。

我正在订阅chartData那种类型是BehaviourSubject. 所以我不订阅urlSubject。因为 url 可能会随时更改 searh 或 filter 参数。

我正在使用 finilize …

我正在为日期选择器使用 ng-boostrap：https ://ng-bootstrap.github.io/#/components/datepicker/api 但我不知道如何更改日期格式，如 dd/mm/yyyy。现在它显示 yyyy/mm/dd 但我想要 dd/mm/yyyy。请帮助任何人。

演示：https : //stackblitz.com/edit/angular-6wpn3h-ahcq4x?file= src/ app/datepicker-popup.html

  <div class="input-group">
  <input class="form-control" placeholder="dd/mm/yyyy"
         name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
  </div>
  </div>

我有一个用于服务隔离场景的服务 SoundPanelService（例如https://angular.io/guide/hierarchical-dependency-injection#scenario-service-isolation）

@Injectable()
export class SoundPanelService {
  recorded = new Subject<Sound>();

  constructor() {
  }
}

我有 SoundPanelComponent

Component({
  selector: 'app-sound-panel',
  templateUrl: './sound-panel.component.html',
  styleUrls: ['./sound-panel.component.css'],
  providers: [SoundPanelService] // Service isolation 
})
export class SoundPanelComponent implements OnInit {
  recorded = new Subject<Sound>();

  constructor(private soundPanelService: SoundPanelService) {
    this.soundPanelService.recorded.subscribe((data) => {
      this.recorded.next(data);
    });
  }

  ngOnInit() {
  }

}

sound-panel.component.html

<app-sound-player></app-sound-player>
<app-sound-recorder></app-sound-recorder>

SoundPlayer 和 SoundRecorder 通过服务 SoundPanelService 与 soundpanel 通信。

我想测试 SoundPanelComponent

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By …

我正在研究 Angular7 及其兼容的ngx-mat-datetime-picker。它按预期工作。

想自定义格式：

实际： mm/dd/yyyy, hh:mm:ss 预期： yyyy-mm-dd hh:mm:ss

目前我没有找到任何格式化选项。

我在模板中尝试过类似的东西 value="{{ mydate | date: 'yyyy-mm-dd hh:mm:ss' }}

但不工作。