如何用管道翻译 Ionic/Angular 中 *ngFor 循环的返回

Posted

技术标签:

【中文标题】如何用管道翻译 Ionic/Angular 中 *ngFor 循环的返回【英文标题】:How to translate with pipe the return of a *ngFor loop in Ionic/Angular 【发布时间】:2018-09-23 12:56:52 【问题描述】:

我是 Ionic/Angular 的新手,因此请求您的帮助。到目前为止,我设法让翻译和 ngFor 在我的脚本中正常工作,但我想将它混合在我的应用程序的侧菜单中,以便它自动翻译。

这是我在 app.html 中的菜单工作正常:它列出了 app.components.ts 中的所有页面

<ion-list>
  <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
    p.title
  </button>
</ion-list>

这是我想要做的:(当我使用诸如“menu_title_1”之类的字符串时,翻译功能可以正常工作)

<ion-list>
  <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
     p.title | translate 
  </button>
</ion-list>

这是我的 app.components.ts

import  Platform, MenuController, NavController, Nav  from 'ionic-angular'; 
import  HomePage  from '../pages/home/home';
import  SingleTechniquePage  from '../pages/single-technique/single-technique';
import  AboutPage  from '../pages/about/about';
import  HelloIonicPage  from '../pages/hello-ionic/hello-ionic';
import  ListPage  from '../pages/list/list';
import  StatusBar  from '@ionic-native/status-bar';
import  SplashScreen  from '@ionic-native/splash-screen';
import  TranslateService, TranslateModule  from '@ngx-translate/core';

(...)

this.pages = [
       title: 'menu_singletechnique', component: SingleTechniquePage ,
       title: 'menu_helloionic', component: HelloIonicPage ,
       title: 'menu_firstlist', component: ListPage ,
       title: 'menu_about', component: AboutPage 

    ];
  

 (...)

  openPage(page) 
    // close the menu when clicking a link from the menu
    this.menu.close();
    // navigate to the new page if it is not the current page
    this.nav.setRoot(page.component);
  

在我尝试翻译循环内容之前,一切正常。

非常感谢您!

【问题讨论】:

尝试改变: p.title | p.title | 翻译翻译 p.title |翻译 【参考方案1】:

你们两个让它看起来如此简单,以至于我现在觉得很愚蠢......!

我只需要在 app.html 中替换:

 p.title | translate 

通过

 p.title | translate 

感谢您如此迅速地回答这么简单的问题。

【讨论】:

【参考方案2】:

只需添加 '()' 即可。

 (p.title) | translate 

【讨论】:

以上是关于如何用管道翻译 Ionic/Angular 中 *ngFor 循环的返回的主要内容,如果未能解决你的问题,请参考以下文章

如何用组和匹配编写管道?

如何用赋值运算符结束管道?

在 Ionic2/Angular2 应用程序中使用 ngFor 获取 Firebase 数据库结果

Linux里如何用管道和重新定向把一个文本里的指定行复制到另一个文本里去?

如何用Python一次性翻译十万条数据

在 ionic 4 + Angular 中将日期转换为 DD/MM/YYYY