Angular - JSON的打印元素只有一次

Question

这是我的代码：

<ion-content padding>
  <h1>Datum: </h1> 
  <ion-list>
    <ion-item *ngFor="let u of tecaj">
        <h2>{{u.datum}}</h2>
        <h2>{{u.drzava}} | {{u.valuta}}</h2>
        <p>{{u.srednji_tecaj}}</p>
    </ion-item>
  </ion-list> 
 </ion-content>

我想打印一次日期，所以

<h2>{{u.datum}}</h2> just once in first <h1> after "Datum:"

截图上有

我的JSON文件。如何在没有* ngFor？

的情况下仅使用JSON对象的一个​​元素

Answer 1

您可以按如下方式更改它，以访问数组中第一个元素的datum，drzava，valuta和srednji_tecaj属性：

<h1>Datum: </h1> 
<ion-item *ngIf="tecaj">
  <h2>{{ tecaj[0]?.datum }}</h2>
  <h2>{{ tecaj[0]?.drzava}} | {{ tecaj[0]?.valuta }}</h2>
  <p>{{ tecaj[0]?.srednji_tecaj }}</p>
</ion-item>

插值内的所有内容（{{}}）都将被评估和字符串化，然后可以在DOM上呈现。

Answer 2

我会说如果你不想使用for循环那么我会选择David但是我没有看到使用for循环有任何问题你可以通过使用循环中的索引来提取单个日期如下

<ion-content padding>
  <h1>Datum: </h1> 
  <ion-list>
    <ion-item *ngFor="let u of tecaj; index as i">
      <div *ngIf="i===0">
        <h2>{{u.datum}}</h2>
        <h2>{{u.drzava}} | {{u.valuta}}</h2>
        <p>{{u.srednji_tecaj}}</p>
       </div>
    </ion-item>
  </ion-list> 
 </ion-content>

Answer 3

其他人已经提出了很好的解决方案，但是ngFor指令允许您访问几个变量（索引，第一个，最后一个，奇数个和偶数个），这些变量允许更清晰，更优雅的代码。这意味着我们可以做到以下几点：

<ion-item *ngFor="let u of tecaj; let first = first">
    <h2 *ngIf="first">{{u.datum}}</h2>