Question

我想只显示链接以“https：//”开头的项目。我想将子字符串与* ngIf：

中的特定字符串进行比较

<div *ngIf="item.link | slice:0:8 == 'https://'">
    <div class="title">
      <a class="title-pointer" href="{{item.link}}">{{item.title}}</a>
    </div>
</div>

我从/ @ angular / core导入了Pipe和PipeTransform，切片似乎有效：

{{item.link | slice:0:8}}

输出：https：//

如果我将* sting与* ngIf中的子进行比较，为什么它不起作用？我应该修改什么？

Answer 1

虽然@DanielWStrimpel在评论中的解决方案可能有效，但整个应用程序中的可重用性大约为零。

我建议您创建一个通用的应用程序范围的服务，它可以为您处理此过程：

export class AppService {
  // match 'https://'
  public isHttps(link: string){
    return link.indexOf("https://") >= 0;
  }
  // match a provided string
  public match(link: string, match: string){
    return link.indexOf(match) >= 0;
  }
}

现在，您可以根据需要匹配任何提供的字符串，例如子域，或者即使您想从网站X排除https://链接

所以你的*ngIf会是：

<div *ngIf="appService.isHttps(item.link)">

或者如果您想匹配https://链接并从stackoverflow.com排除网站：

<div *ngIf="appService.isHttps(item.link) && !appService.match('stackoverflow.com')">

这也比分割字符串和执行此评估两次更快，性能更明智，就像使用pipe一样。

以下是服务的工作示例：https://stackblitz.com/edit/angular-aegndv

<小时/> 注意：当然，将服务命名为更合适。

比较Angular 4中的子串

1 个答案: