Question

下午好！

很抱歉，我无法弄清楚这一点，但这是问题所在：

我有一个名为“ heroes.ts”的文件，其中有许多“ Hero”类的对象（从另一个文件导出），在这里您可以看到它的片段->

import { Hero, Villain } from '../hero';

export const HEROES: Hero[] = [

{ id: 78251, name: 'Fareeha Amari',            codename: 'Pharah',        alive:true  },
{ id: 15964, name: 'Gengi Shimada',            codename: 'Gengi',         alive:true  },
{ id: 21345, name: 'Angela Ziegler',           codename: 'Mercy',         alive:true  },
{ id: 84519, name: 'Lena Oxton',               codename: 'Tracer',        alive:true  },
{ id: 64518, name: 'Jeese Mccree',             codename: 'Mccree',        alive:true  }, 

..............]

这些信息在另一个文件“ heroes.component.html”中使用。在某一点之后，我需要调用此数据。而且我这样做是这样的（通常，没有任何问题）：

<h2>Heroes</h2>

  <ul id="heroes">

<li *ngFor="let hero of heroes" 
[class.selected]="hero === selectedHero" 
(click)="onSelect(hero)"> 

  <p> ID: {{hero.id}} | {{hero.name}}, codename {{hero.codename}}. 
  <!-- Until here, everything is AOK and printed --> 
  Status: <script> aliveDead()  </script> </p>  
  <!-- Here lies the preoblem, nothing gets printed after "Status --> 
</li>

您一定想知道aliveDead（）在哪里，我在同一文件中有此功能：

 <script>

    function aliveDead()
    {
      if( hero.alive == 1 )
      {
        return "Active";
      }
      else
      {
        return "Dead";
      }
    }
//OBS: i tried using hero.alive and hero as parameters for this function
//it does not work
</script>

我需要使此函数在脚本标签中运行，并使用从代码的第一块（“ heroes.ts”）提供的信息作为参数，返回一个可以在“状态”之后打印的值。< / p>

再次，很抱歉，如果我不能很好地解释这一点，但我已尽力了

仍然感谢

chab

Answer 1

在heroes.ts组件中有hero.id等的地方，可以改为定义aliveDead。

Status: {{aliveDead(hero)}}

如果您确实希望单独定义aliveDead，则可以将其放在单独的文件中。然后，您可以将其导入heroes.ts：

import { aliveDead } from 'path/to/aliveDead.ts';

@Component(...)
class HeroesList {
  ...
  // Assign your declared function to a component property
  aliveDead = aliveDead;
}

另一种更有效的方法是创建管道：

从'@ angular / core'导入{Pipe，PipeTransform};

/**
 * Pass-through pipe that mocks the `translate` pipe used for L10n for tests
 */
@Pipe({ name: 'aliveDead' })
export class HeroStatusPipe implements PipeTransform {
  transform(hero) {
    if (hero.status === '1') {
      return 'Active';
    }
    return 'Dead';
  }
}

然后，您将不得不将此管道添加到模块声明中。在您的模板中，您将可以使用Status: {{hero | aliveDead}}

<angular cli =“”>将HTML内的脚本与另一个.ts文件中的参数一起使用

1 个答案: