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}}

插补管不适用于大写角度

1 个答案: