标签: angular-pipe

我试图在我的角度4应用程序中显示数字格式.基本上我正在看的是,如果数字是12.23百万,那么它应该显示例如12.2M(小数点后一位)

如果数字是50,000.123那么50.1K

我如何在角度上实现这一点.我需要写一个指令吗？有角度的内置管道吗？

结构体

export interface NpvResults  {

            captiveInsYear: number[];
            captiveInsPremiumPaid: number[];
            captiveInsTaxDeduction: number[];
            captiveInsLoanToParent: number[];
            captiveInsCapitalContribution: number[];
            captiveDividentDistribution: number[];
            captiveInsTerminalValue: number[];

        }

该数组初始化为以下值

this.sourceResults.captiveInsPremiumPaid = [1,2,3,4,5];

HTML

<td *ngFor= "let item of NpvResults.captiveInsPremiumPaid" >{{item}}</td>

我想要pipe一个反应形式的表格组。

然后我想对这组单独的控件进行一些检查。

这是我定义表单的方式

  myForm = this.formBuilder.group({
    myFormNameDrop: this.formBuilder.group({
      myName:['',Validators.required],
      myDrop:['era']
    }),    
    style:[''],
    userId:[this.user_id]
  });

这就是pipe我试图创造的

this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe(      
  debounceTime(400),
  distinctUntilChanged(),            
  filter(formdata => formdata.myName.length > 0),
  switchMap( formdata => this.shoesService.details(formdata.myName)),
  shareReplay(1)
);//pipe  

我有两个错误。 TypeError: Cannot read property 'pipe' of undefined有关this.results = this.myForm.value.myFormNameDrop.valueChanges.pipe(

并且 VS 代码显示有关以下内容的警告filter(formdata => formdata.myName.length > 0),：myName类型上不存在属性'{}'

在这种情况下，我如何访问 formGroups 和 formGroups 的控件？我使用角度 6

谢谢

我创建的应用程序在开发服务器 ng serve 上运行良好，但是当我尝试为生产构建时，它因此错误而失败

ERROR in src/app/leaderboard/leaderboard.component.html(9,17): Argument of type 'object' is not assignable to parameter of type 'Map<unknown, unknown>'

这是我的排行榜.component.ts

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import 'firebase/firestore';


@Component({
  selector: 'app-leaderboard',
  templateUrl: './leaderboard.component.html',
  styleUrls: ['./leaderboard.component.css']
})

export class LeaderboardComponent implements OnInit {

  constructor() { }
  db = firebase.firestore();
  cities:object;
  suburbs:object;
  unsorted() { }
  async getCities() {
    await this.db.collection("Cities").orderBy('count', "desc").get()
    .then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            //console.log(doc.id, ": ", doc.data().count);
            this.cities[doc.id] = doc.data().count …

我有一个HTML输入:

<input [(ngModel)]="item.value" name="inputField" type="text" />

我想格式化它的值并使用现有的管道:

.... [(ngModel)]="item.value | currency:'USD':true" .....

此外,我试图以下面的方式使用它,但它第一次给我理想的输出并在更新字段时显示错误:

<input type="text" 
   [ngModel]="item.value | currency:'USD':true" 
   (ngModelChange)="item.value=($event)">

上面的代码导致以下错误.

ERROR错误:InvalidPipeArgument:''对于管道'CurrencyPipe'
在invalidPipeArgumentError(common.es5.js:2610)
处于formatPumber.webpackJsonp
.../../../common /的formatNumber(common.es5.js:3176)LandingPageComponent.webpackJsonp上的@ angular/common.es5.js.CurrencyPipe.transform(common.es5.js:3350)
.../../../../../src/app/guest-handling/landing 在handleEvent的object.eval
[as handleEvent](LandingPageComponent.html:38)的-page/landing-page.component.ts.LandingPageComponent.transformAmount(landing-page.component.ts:54)
(core.es5.js:12014) )
在callWedDebugContext(core.es5.js:13475)
的object.debugHandleEvent [as handleEvent](core.es5.js:13063)
at dispatchEvent(core.es5.js:8607)
at core.es5.js:9218

我必须在HTML中以json显示解析数组:

 <p class="personaType">{{cardData.names}}</p>

名字是哪里

names: Array(5) 0:"Person" 1:"Artist" 2:"Performing Artist" 3:"Production Artist" 4:"Visual Artist" 5:"Intermedia Artist"

我想将名称显示为:

人,艺术家,表演艺术家,制作艺术家

现在它显示为(没有空格):

人,艺术家,表演艺术家,制作艺术家

是否有任何内置管道可用于显示此类数据的角度？

我是Angular 2的初学者.我正在尝试使用angular显示一些数据.这是我的代码部分:

  <span>Value :</span> <span>{{myvalue| number : '1.2-2'}}</span>

以上部分将显示值,例如:"124,500.00".没问题,但我需要删除逗号并显示数据仅为124500.00.这也不是货币类型.

我尝试过这样的事情,但是没有用

   <span>Value :</span> <span>{{myvalue| number: '.2-3''}}</span>

我该怎么做？我可以使用任何自定义管道吗？

提前致谢

我正在尝试创建一个共享模块,但它不想以某种方式工作.

共享模块如下所示:

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SharedMetaModule } from './shared-meta';
import { ApplicationState } from './state/application-state';
import { MilitaryTimePipe } from './pipes/military-time-pipe';
import { KeysPipe } from './pipes/object-pipe';
import { GirlsClass } from './advertisers/girls';

@NgModule({
    imports: [CommonModule],
    declarations: [
        KeysPipe,
        MilitaryTimePipe
    ],
    exports: [
        SharedMetaModule,
        KeysPipe,
        MilitaryTimePipe
    ],
    providers: [ApplicationState]
})
export class SharedModule {
    static forRoot(): ModuleWithProviders {
        return { ngModule: SharedModule };
    }
}

我有一个像这样的app.module.ts:

import { …

我在输入字段上使用内置管道标题 - 在被动形式的用户名.只有当我在输入字段中输入时它才能正常工作,当我从该输入字段的浏览器建议中选择它时它就无法正常工作,即使我集中注意力也是如此.

app.component.ts

ngOnInit() {
    this.signupForm = new FormGroup({
      'userData': new FormGroup({
        'username': new FormControl(null, [Validators.required, this.forbiddenNames.bind(this)]),
        'email': new FormControl('abc@test.com', [Validators.required, Validators.email], this.forbiddenEmails)
      }),
      'gender': new FormControl('male'),
      'hobbies': new FormArray([])
    });
}

app.component.html

<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    <div formGroupName="userData">
        <div class="form-group">
           <label for="username">Username</label>
             <input
                  type="text"
                  id="username"
                  formControlName="username"
                  class="form-control"
                  [value]="signupForm.get('userData.username').value | titlecase">
                  <span *ngIf="signupForm.get('userData.username').errors['required']">
                      This field is required
                  </span>
          </div>
         ...
     </div>
     <button class="btn btn-primary" type="submit">Submit</button>
 </form>

当我打字时它工作正常

当我从浏览器选择中选择时它不起作用
虽然我从输入字段中聚焦它仍然是大写的.

有人可以帮助我做错了什么.

@Haifeng Zhang这是我在问题中提到的场景,我在你的stackblitz演示中复制了

我keyvalue用简单的代码测试Angular的管道:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<div *ngFor="let prop of testObj | keyvalue">
      <div>key: {{prop.key}}</div>
      <div>value: {{prop.value}}<div>
    </div> `
})
export class AppComponent {
  testObj = { id: 1, name: "Abdul Rafay" }
}

但它给了我这个错误:

模板解析错误:无法找到管道'keyvalue'(testObj | keyvalue的"prop")> key:{{prop.key}} value:{{prop.value}}"):ng:/// AppModule /AppComponent.html@0:17评估src/main.ts引导应用程序

我错过了什么吗？这是我的Stackblitz

我正在使用简单的日期管道来格式化日期，这在 web 和 android 浏览器上运行良好，但在 IOS 上它什么也没显示。如果我移除 PIPE 并显示数据，那么它会显示，但不会与 PIPE 一起显示。

{{race.race_date | date:'M/d/y'}}

您可以在问题链接上检查此问题

后端正确返回数据。