如何用管道翻译 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 数据库结果