javascript - 如何在角度中使用foreach获取数组中的数据

Question

如何使用每个获取数据，如果数据名称已显示，则应再次重复。例如在这张照片中。

这是代码：
list.component.ts

 this.gaugeOption = [];

    this.global.getData(`/services/getData.php`)
      .pipe(take(1))
      .subscribe((res: any) => {
        this.rowData = res;
        console.log(this.rowData)
        this.rowData.forEach(room => {
          this.gaugeOption.push({
            title: {
              text: room.sensor,
              left: '5%',
              top: '5%',
              textStyle: {
                fontSize: 18,
              }
            },
            tooltip: {
              formatter: "{a} <br/>{b} : {c}°"
            },
            toolbox: {
              show: true,
              feature: {
                mark: { show: false },
                restore: { show: false },
                saveAsImage: { show: false }
              }
            },
            series: [
              {
                name: 'Temperature',
                type: 'gauge',
                center: ['40%', '70%'],
                splitNumber: 10,
                radius: '70%',
                axisLine: {
                  lineStyle: {
                    color: [[0.2, '#48b'], [0.8, '#228b22'], [1, '#ff0000']],
                    width: 8
                  }
                },
                axisTick: {
                  splitNumber: 10,
                  length: 12,
                  lineStyle: {
                    color: 'auto'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: 'auto'
                  }
                },
                splitLine: {
                  show: true,
                  length: 30,
                  lineStyle: {
                    color: 'auto'
                  }
                },
                pointer: {
                  width: 5
                },
                title: {
                  show: true,
                  offsetCenter: [0, '65%'],
                  textStyle: {
                    fontWeight: 'bolder'
                  }
                },
                detail: {
                  formatter: '{value}°',
                  textStyle: {
                    color: 'auto',
                    fontWeight: 'bolder'
                  }
                },
                data: [{ value: room.temperature, name: "Temperature" }]
              }
            ]
          });
        });

    });

list.component.html

 <ul class="cards">
        <li class="cards__item" *ngFor="let data of gaugeOption; let i = index">
          <div class="card">
            <div echarts [options]="data" id="{{'chart-' + i}}" [autoResize]="true"></div>
            <div class="card__content">
              <!-- <div class="card__title">Flex Basis</div> -->
                <!-- <p class="card__text">This defines the default size of an element before the remaining space is distributed.
                  It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height
                  property."</p> -->
              <!-- <button class="btn btn--block card__btn">Button</button> -->
            </div>
          </div>
        </li>
        <li>
      </ul>

当第一个数据名称已经显示时，它不应该重复。它应该当名称已经显示它不会显示它会得到最新的日期和时间，例如，有日期和时间有2个数据 10-27-2019 08:00:02，10-27-2019 08:22:02它会得到最新的

提前感谢您的帮助。

标签： javascriptangular

Answer 1

然后简单地使用 find 获取 res 中的第一个显示元素

 this.global.getData(`/services/getData.php`)
  .pipe(
    map(res => res.find(entry => entry.name === 'display')), // res is an array here
    take(1)
  )
  .subscribe((res: any) => { // res is a single element here