Question

我有一个名为customer的api，它正在dropdown中显示，通过选择特定客户，我可以显示所选的客户详细信息（所选 customer 对象的属性）（例如电话，时间）在以下输入字段中：

属性 time 是一个string，我想拆分并显示以下字符串：

我正在尝试通过 splice 方法进行拼接，但是我无法实现。

Answer 1

在您的 list.component.html 中尝试像这样使用split。

<mat-form-field class="timings-days">
   <input matInput  placeholder="Hours" matInput [value]="customer?.time.split(':')[0]" >
</mat-form-field>
<mat-form-field  class="timings-hrs">
   <input matInput  placeholder="Minutes" matInput [value]="customer?.time.split(':')[1]" >
</mat-form-field>
<mat-form-field  class="timings-min">
   <input matInput  placeholder="Seconds" matInput [value]="customer?.time.split(':')[2]" >
</mat-form-field>

Answer 2

我认为最好使用自定义管道，而不是将登录名保留在html中。这可能会导致问题。更广泛的方法是创建自定义管道，并将逻辑保存在单独的文件中。这里是如何创建自定义管道的方法。

管道：

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

@Pipe({
  name: 'timepart'
})
export class TimePartPipe implements PipeTransform {

  transform(value: any, part: string, symbol: string): string {
    if (symbol == "" || symbol == null) {
      symbol = ":";
    }
    var i = value.split(symbol);
    if (part == "hh")
      return i[0];
    if (part == "mm")
      return i[1];
    if (part == "ss")
      return i[2];
  }

}

HTML ： //传递符号和想要的部分作为参数

   <input matInput  placeholder="Hours" matInput [value]="customer?.timeArray[0]" >
</mat-form-field> -->
<mat-form-field  class="timings-hrs">
   <input matInput  placeholder="Minutes" matInput [value]="customer?.time | timepart : 'mm'" >
</mat-form-field>
<mat-form-field  class="timings-min">
   <input matInput  placeholder="Seconds" matInput [value]="customer?.time | timepart : 'ss'" >

这是处理HTML输出的更合适的方法。

演示：https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-pvnwaf?file=src%2Fapp%2Flist%2Flist.component.html

分割并以角度显示字符串值

2 个答案: