如何解决通过Transloco加载的阵列上的Angular ngFor
我正在使用Transloco在angular10项目中管理多种语言。 我创建了一个json i18n文件,如下所示:
"Datalist":[
{
"from" : "value","Content" : "data"
},{
"from" : "value","Content" : "data"
}...]
<div class="container" *transloco="let datalist; read: 'Datalist'">
<a>tst1</a>
<div class="tile is-3" *ngFor="let data of datalist">
<a>tst2</a>
<div class="content">{{data.Content}}</div>
<p class="subtitle">{{data.from}}</p>
</div>
我想为数据列表的每个元素创建一个图块,角度不会引发异常。但是,它不加载任何内容(tst2不显示)。我将对该数据进行多次转换,并且我希望将来能够轻松地添加和删除数据而不接触模板。
这是我的第一个有角度的项目,我可能错过了一些显而易见的事情。 有什么想法吗?
解决方法
您应该能够使用transloco管道进行翻译。
<div class="tile is-3" *ngFor="let data of datalist">
<a>tst2</a>
<div class="content">{{data.Content | transloco}}</div>
<p class="subtitle">{{data.from | transloco}}</p>
</div>
data.content应该包含与i8n .json中相同的密钥。
示例:
en.json
{
"GLOBAL": {
"RESET": "Reset","FILTER": "Filter",}
}
HTML:
<button mat-raised-button color="primary" (click)="reset()">{{ 'GLOBAL.RESET' | transloco }}</button
,
非常感谢我尝试了您所说的答案,但是如果我事先未通过transloco加载ngFor,则数据列表不存在。
我重新开始了我的组件,并清理了导入内容。 我设法通过添加以下内容使它起作用(即使我真的不知道为什么):
datalist: any;
在我的component.ts中,我最好稍后再输入。
我最好的把握是,当我在模板中调用*transloco="let datalist; read: 'Datalist'">
时,它将在我的component.ts中初始化数据列表,
因此,当我调用ngFor时,它将在component.ts中找到带有值的数据列表。
无论如何,非常感谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。