Question

我是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);
  }

再次，一切正常，直到我尝试翻译循环内容。

非常感谢您！

Answer 1

你们两个让它看起来如此简单，以至于我现在变得很蠢...！

我只需要替换 app.html ：

{{ {{p.title}} | translate }}

作者

{{ p.title | translate }}

感谢您这么快回答这个简单的问题。

Answer 2

只需添加 '()' 即可正常工作。

{{ (p.title) | translate }}

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

2 个答案: