使用 ngIf 检查字符串是否以特定字符开头并显示它

Question

我是新手，有问题要解决。请帮忙，提前致谢。

我通常像这样在屏幕上显示数据，而且每次都能正常工作。

<h3> Kod Bar : {{ article.barcode_no }} </h3>

但现在我想使用 *ngIf 检查如果 article.barcode_no 以某个字符开头，我希望在显示它之前先将其删除。

<h3 *ngIf=" article.article.indexOf(article.barcode_no) === 'S' ? (article.barcode_no).substr(1) : none "> Kod Bar    : {{ article.barcode_no }} </h3>

但我总是出错

ERROR TypeError: Cannot read property 'indexOf' of undefined

我也尝试过使用 Pipe 但没有用。请帮忙。谢谢。

 <h3 *ngIf=" (article.barcode_no | startsWith : 'S') ? (article.barcode_no).substr(1) : none "> Kod Bar    : {{ article.barcode_no }} </h3>

.

import { Pipe, PipeTransform, Injectable } from '@angular/core';

@Pipe({
    name: 'startsWith'
})

export class AccessProviders implements PipeTransform {

  transform(fullText: string, textMatch: string) : boolean {
      return fullText.startsWith(textMatch);
  }
}

[谢谢你们的回复。我感谢所有的答案！ ]

Answer 1

首先你得到那个错误，因为在评估的时候文章还没有设置。为了避免模板中出现它，您可以使用问号语法来检查当时是否可以安全访问属性：

 *ngIf=" article?.article.indexOf(article.barcode_no)

另外你确定是 'article.article' 吗？因为在管道上你使用另一个值所以如果它不起作用那么出于不同的原因

Answer 2

你可以试试这个。

<h3 *ngIf="article.barcode_no.indexOf('S',0) == 0 "> Kod Bar    : {{ article.barcode_no.substring(1) }} </h3>

Stackblitz demo

Answer 3

尝试像下面这样更新你的管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'startWith'
})
export class StartWithPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(value && typeof(value) === 'string'){
      return value[0] === args;
    }
    return false;
  }

}

Answer 4

你可以通过这个简单地存档。

{{str.charAt(0) == 'YourChar' ? srt.substring(1): str}};

使用 ngIf 检查字符串是否以特定字符开头并显示它

Check if a string starts with certain character using ngIf and display it

angular

ionic-framework

pipe

angular-ng-if