Angular 4中*ngIf子串对比失效问题及修改方案咨询

嘿，我来帮你搞定这个Angular模板里的判断问题！你说slice指令能正常输出https://，但*ngIf里的对比失效，大概率是slice的参数没写对，或者有更简洁可靠的方法没用到，咱们一步步来理清楚：

先说说为什么你的slice对比可能失效 #

https://一共是8个字符（数一下：h、t、t、p、s、:、/、/），而Angular的slice管道（或者字符串的slice方法）第二个参数是结束索引（不包含），如果你写的是slice(0,7)，那只会截取前7个字符，得到的是https:/（少了最后一个/），和https://对比自然不相等。

要是你坚持用slice的方式，得把参数改成slice(0,8)，同时别忘了加空值判断避免报错：

<!-- 正确的slice对比写法 -->
<div *ngIf="link && link.slice(0,8) === 'https://'">
  这是HTTPS开头的链接
</div>

更推荐的方案：直接用字符串的startsWith方法 #

这种方法更直观，也不会因为数错字符数踩坑。Angular模板里可以直接调用字符串的startsWith方法，只要先确保变量不为空就行：

组件类里定义链接变量：

// 组件.ts文件
export class YourComponent {
  link: string = 'https://your-domain.com';
}

模板里的*ngIf判断：

<div *ngIf="link && link.startsWith('https://')">
  这个链接符合HTTPS开头的要求！
</div>

进阶方案：自定义StartsWithPipe（适合多处复用） #

如果你的项目里很多地方都需要判断字符串是否以某个前缀开头，自定义一个管道会更方便复用：

1. 创建一个新的Pipe文件（比如starts-with.pipe.ts）：

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

@Pipe({ name: 'startsWith' })
export class StartsWithPipe implements PipeTransform {
  transform(value: string, prefix: string): boolean {
    // 空值判断，避免报错
    if (!value || !prefix) return false;
    return value.startsWith(prefix);
  }
}

2. 在你的模块（比如AppModule）里声明这个Pipe：

import { StartsWithPipe } from './starts-with.pipe';

@NgModule({
  declarations: [
    // 其他组件、管道
    StartsWithPipe
  ],
  // ...其他配置
})
export class AppModule { }

3. 模板里直接使用这个管道：

<div *ngIf="link | startsWith: 'https://'">
  这是HTTPS开头的链接
</div>

这样不管是判断https://还是其他前缀，都能直接复用这个管道，非常方便。

内容的提问来源于stack exchange，提问作者Michael