插值管不适用于大写角度

Question

好的，

我有三个值，ParentTitle 和 childTitle，SiblingTitle。全部来自 Header[] 数组。

 <li *ngFor="let header of headers">
      <div>
        <a> <i class="header-icons" [ngClass]="[header.titleIcon]"></i>
          <span class="menu-parentTitle">{{header.parentTitle | uppercase}}<


 headers: Header[] = [
// tslint:disable-next-line:max-line-length
{
  parentTitle: ['Settings'], childTitle: ['General Setup', 'PMS Setup', 'Crewing Setup', 'Purchase Setup', 'Safety Setup',
    // tslint:disable-next-line:max-line-length
    'RA Setup', 'RH Setup', 'Voyage Setup'], siblingTitle: ['Vessel', 'Port', 'Owner', 'Engine Type', 'Vessel Type'],
  titleIcon: 'ft-settings', url: 'home/general-setup'
},
{ parentTitle: ['Data Sync'], childTitle: [], siblingTitle: [], titleIcon: 'ft-zap', url: '' },
{ parentTitle: ['PMS'], childTitle: [], siblingTitle: [], titleIcon: 'ft-layers', url: '' },
{ parentTitle: ['Crewing'], childTitle: [], siblingTitle: [], titleIcon: 'ft-users', url: '' },
{ parentTitle: ['Purchase'], childTitle: [], siblingTitle: [], titleIcon: 'ft-shopping-cart', url: '' },
{ parentTitle: ['Safety'], childTitle: [], siblingTitle: [], titleIcon: 'ft-plus-square', url: '' },
{ parentTitle: ['Document'], childTitle: [], siblingTitle: [], titleIcon: 'ft-folder', url: '' },
{ parentTitle: ['Forms'], childTitle: [], siblingTitle: [], titleIcon: 'ft-paperclip', url: '' },
{ parentTitle: ['Risk Analysis'], childTitle: [], siblingTitle: [], titleIcon: 'ft-shield', url: '' },
{ parentTitle: ['Rest Hours'], childTitle: [], siblingTitle: [], titleIcon: 'ft-clock', url: '' },
{ parentTitle: ['Voyage'], childTitle: [], siblingTitle: [], titleIcon: 'ft-compass', url: '' },
{ parentTitle: ['Environment'], childTitle: [], siblingTitle: [], titleIcon: 'ft-droplet', url: '' }

];

所有这些都来自服务器 rest api，并存储为 arrary[] 字符串。所以在 div 标签内我使用 *ngFor 循环来显示所有的标题。这很好用。

所以 {{ childTitle |大写 }} 工作正常。但是 {{ parentTitle.title |大写 }} ---> 不工作或根本不显示文本。

可能是什么问题！。

Answer 1

如果你想从数组中访问标题，应该是，

{{ parentTitle[0]?.title | uppercase }}

编辑：

正如你提到的它只是一个字符串数组，你可以直接访问字符串，因为你真的没有对象

<span class="menu-parentTitle">{{header | uppercase}}<

在我检查了你最新的 JSON 之后，看来你需要

li *ngFor="let header of headers">
      <div>
        <a> <i class="header-icons" [ngClass]="[header.titleIcon]"></i>
          <span class="menu-parentTitle">{{header.parentTitle[0] | uppercase}}