Question

我在Ionic工作，我试图建立一个for循环以显示数据库中数据的最大值。

我目前在数据库中有一些数据。数据是这样的：

[{
    "name": "HAREEZ HAKIMI",
    "gender": "M",
    "dob": "1980-12-15",
    "age": 37,
},
{
    "name": "kids new name",
    "gender": "F",
    "dob": "2015-09-28",
    "age": 2,
},
{
    "name": "SRIDHAR",
    "gender": "M",
    "dob": "1987-12-15",
    "age": 30,
}]

我需要显示年龄最高的数据。对于这种情况，预期输出为：

Name:HAREEZ HAKIMI
Gender:M
Birth Date:1980-12-15
Age: 37

这是我的HTML：

    <ion-grid *ngFor="let jobseeker of kidList">
    <ion-row>
      <ion-col col-12 class="header-list">Kids</ion-col>
    </ion-row>
    <ion-row>
    <ion-row>
      <ion-col col-12 class="item-list">Name: {{jobseeker.name}}</ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-12 class="item-list">Gender: {{jobseeker.gender}}</ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-12 class="item-list">Birth Date: {{jobseeker.dob}}</ion-col>
    </ion-row>
    <ion-row>
      <ion-col col-12 class="item-list">Age: {{jobseeker.age}}</ion-col>
    </ion-row>

目前我的打字稿代码如下：

for (let kids of this.kidList) {
      if (kids.age > maxAge) {
        maxAge = kids.age;
      }
    }
    return maxAge;

目前，浏览器显示数据库中包含的所有数据。有人可以告诉我如何只显示最高年龄吗？非常感谢您的帮助。

Answer 1

您可以执行以下操作：

let oldest = {};

for (let kids of this.kidList) {
      if (kids.age > oldest.age) {
        oldest = kids;
      }
    }

然后在您的标记中尝试以下操作：

<ion-grid>
<ion-row>
  <ion-col col-12 class="header-list">Kids</ion-col>
</ion-row>
<ion-row>
<ion-row>
  <ion-col col-12 class="item-list">Name: {{oldest.name}}</ion-col>
</ion-row>
<ion-row>
  <ion-col col-12 class="item-list">Gender: {{oldest.gender}}</ion-col>
</ion-row>
<ion-row>
  <ion-col col-12 class="item-list">Birth Date: {{oldest.dob}}</ion-col>
</ion-row>
<ion-row>
  <ion-col col-12 class="item-list">Age: {{oldest.age}}</ion-col>
</ion-row>

Answer 2

嗯。可能有很多不同的方式，但这只是一个变量，其中包含一个年龄最高的孩子条目（在此对话中，名为oldestkid）

，而不是使用*ngFor，只需打印出oldestKid（如果oldestKid为空，您可能需要检查kidList是否设置为某个值）

如果您仍然想使用*ngFor，请考虑使用（pipes）

Answer 3

尝试一下

let arr = [
                {
                    "name": "HAREEZ HAKIMI",
                    "gender": "M",
                    "dob": "1980-12-15",
                    "age": 37,
                },
                {
                    "name": "kids new name",
                    "gender": "F",
                    "dob": "2015-09-28",
                    "age": 2,
                },
                {
                    "name": "SRIDHAR",
                    "gender": "M",
                    "dob": "1987-12-15",
                    "age": 30,
                }
            ];

            function getMax(arr, prop) {
                let max;
                for (let i=0 ; i<arr.length ; i++) {
                    if (!max || parseInt(arr[i][prop]) > parseInt(max[prop]))
                        max = arr[i];
                }
                return max;
            }
        this.jobseeker = getMax(arr, "age");
        console.log(this.jobseeker);

以html

<ion-grid>
    <ion-row>
        <ion-col col-12 class="header-list">Kids</ion-col>
    </ion-row>
    <ion-row>
        <ion-row>
            <ion-col col-12 class="item-list">Name: {{jobseeker.name}}</ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-12 class="item-list">Gender: {{jobseeker.gender}}</ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-12 class="item-list">Birth Date: {{jobseeker.dob}}</ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-12 class="item-list">Age: {{jobseeker.age}}</ion-col>
        </ion-row>
    </ion-row>
</ion-grid>

Answer 4

没有太多内容。我认为您需要学习JavaScript的基础知识

角度标记

JavaScript

 <ion-grid *ngFor="let jobseeker of kidsSortedByAge.slice(0, 1)">

打字稿：如何显示数据库中的最大值

4 个答案: