Question

我有通过HTTP从SQL返回数据的服务。在我的组件中，我有代码：

export class GetFruitsComponent implements OnInit {

  valuesFruits: any;

  constructor(private srv: SendRecvService) {
    this.getFruits();
   }

  ngOnInit() {
  }

  getFruits() {
    this.srv.GetFruits().subscribe(response => {
      this.valuesFruits = response;
    }, error => {
      console.log(error);
    });
  }
}

在HTML中，我有：

<ul>
    <li *ngFor = "let fruit of valuesFruits">
            {{fruit.userId}}
    </li>
</ul>

此

 {{fruit.userId}}

是一个数字。我想要的是在这个地方我想从其他表中获得另一个值。我已经准备好函数，在其中将以下值作为参数：

 {{fruit.userId}}

在哪里可以调用此方法？

Answer 1

在这种情况下，可以使用

pipe

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

@Pipe({ name: 'capitalizeMe' })
export class CapitalizePipe implements PipeTransform {

// put your method instead inside transform, input is the data you want to modify
transform(input: string): string {
  return input && input.length
    ? (input.charAt(0).toUpperCase() + input.slice(1).toLowerCase())
    : input;
  }
}

在App模块或另一个模块中（要在其中使用该管道的组件，必须在该模块中声明）：

import { CapitalizePipe } from './pipes/capitilize.pipe';
import { GetFruitsComponent } from './get-fruits.component';

@NgModule({
  imports: [],
  declarations: [
    GetFruitsComponent,
    CapitalizePipe
  ]
})
export class AppModule { }

在组件pipe中使用html：

// fruit.description is just for example here
{{ fruit.description | capitalizeMe }}

通过http循环返回元素

1 个答案: