Как определить функцию, которая принимает число в качестве параметра и возвращает его квадрат, в угловых?

Question

У меня есть массив чисел, и мне нужно отобразить эти числа и соответствующие им квадраты вместе с ним.Для этого мне нужно определить функцию, которая принимает число в качестве параметра и возвращает его квадрат в качестве значения. Я попытался определить функцию как

 Numbers:number[]=[2,3,5,7];
  square(cm:number):number{
  return cm*cm;
 }

Answer 1

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

@Pipe({
  name: 'square',
})
export class SquarePipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {

    return value * value
  }

}

html:

<ng-container *ngFor="let item of iterms">{{ item | square}}</ng-container>

module.ts:

declarations:[SquarePipe ]

Answer 2

Вы можете использовать функцию карты

var number = [2, 3, 5, 7]; 
var square = number.map(c=> c*c);

Answer 3

Вы используете его неправильно. Вызовите свою функцию в HTML.

<h4> List Of Numbers</h4>
  <div class="row" *ngFor="let c1 of Numbers;index as i">
   <div class="col-1   m-1">
    {{i}}
</div>
<div class="col-2 border bg-light m-1">
    {{c1}}
</div>
<div class="col-2 border bg-light m-1">
    {{square(c1)}}
</div>
<div class="col-1 border fa fa-trash m-1 bg-white" (click)="remove(c1)">
</div>

Answer 4

Вам нужно использовать {{square(c1)}}, чтобы вызвать метод и получить квадратное значение

<h4> List Of Numbers</h4>
  <div class="row"*ngFor="let c1 of Numbers;index as i">
   <div class="col-1   m-1"> 
    {{i}}   
  </div>
  <div class="col-2 border bg-light m-1"> 
   {{c1}}
  </div>
   <div class="col-2 border bg-light m-1">
     {{square(c1)}}
  </div>
  <div class="col-1 border fa fa-trash m-1 bg-white" (click)="remove(c1)">
  </div>