Angular 从另一个数组的结果验证一个数组内的值

Question

我正在尝试从另一个数组的结果中检查一个数组中的值，并在对象中放置一个键，这样我就可以在我的屏幕上创建一个 ngfor 并带来这些值，但我没有得到它。我需要在服务器数组中创建卷键，getVolumes 端点 returns 我是一个包含附件键的对象数组，里面是 server_id 键，该卷所在的服务器 ID 在哪里.我只需要带来包含名称键值的卷，但结果是一个空数组。你能帮帮我吗？

我的代码

  ngOnInit(): void {
    forkJoin(this.serverService.getServer(), 
    this.storage.getVolumes())
    .pipe(takeWhile(() => this.alive))
    .subscribe(([servers, volumes]) => {
      this.volumes = volumes;
      this.servers = servers.map((server) => ({
        ...server,
        volumes: this.volumes.map((volume) => {
          volume['attachments'].map((volumeId) => {
            console.log(volumeId)
            volumeId['server_id'] === server.id ? volumeId : 'None';
            console.log(this.servers)
          })
        })
      }))
    })
  }

我的html代码：

<ng-container *ngFor="let volume of volumes">
                <tr *ngIf="volume?.name.length > 2" (click)="selectVolume = volume">
                  <td>  
                    <div class="user-info">
                      <div class="user-info__img">
                        <img src="./assets/img/storages.svg" alt="UserImg">
                      </div>
                      <div class="user-info__basic">
                        <h5 class="mb-0">{{volume.name}}</h5>
                      </div>
                    </div>
                  </td>
                  <td >{{volume.size}} GB</td>

                  <td>
                    <span *ngFor="let attachedVolume of servers.volumes">
                      {{attachedVolume.name}}
                    </span>
                  </td>
</ng-container>

我对第 API 卷的回复：

{
      "id": "939b1432-13f7-41ff-b9d2-908b25499c99",
      "name": "",
      "size": 10,
      "status": "in-use",
      "volume_type": "__DEFAULT__",
      "attachments": [
        {
          "id": "939b1432-13f7-41ff-b9d2-908b25499c99",
          "server_id": "1879f47f-1c5e-464b-bb76-e7cc13ef426e",
          "attachment_id": "5749f842-5dff-48ac-ac57-2a6bfb806ad5",
          "volume_id": "939b1432-13f7-41ff-b9d2-908b25499c99",
          "device": "/dev/vda",
        }
      ]
    },
    {
      "id": "bd91e685-bdd4-4bb8-b25d-18e91f458fb8",
      "name": "Test01",
      "size": 20,
      "status": "in-use",
      "volume_type": "__DEFAULT__",
      "attachments": [
        {
          "id": "bd91e685-bdd4-4bb8-b25d-18e91f458fb8",
          "server_id": "1879f47f-1c5e-464b-bb76-e7cc13ef426e",
          "attachment_id": "f4cd9033-dd6e-4d47-88a7-904c267f162f",
          "volume_id": "bd91e685-bdd4-4bb8-b25d-18e91f458fb8",
          "device": "/dev/vdc"
        }
      ]
    },
    {
      "id": "97b800c5-1061-4a38-b7ec-c4528f248f72",
      "name": "",
      "size": 20,
      "status": "in-use",
      "volume_type": "__DEFAULT__",
      "attachments": [
        {
          "id": "97b800c5-1061-4a38-b7ec-c4528f248f72",
          "server_id": "b9c7e32a-bf99-4250-83cb-13523f9c1604",
          "attachment_id": "c0cd7598-69ba-4ce8-8407-aef68219a00d",
          "volume_id": "97b800c5-1061-4a38-b7ec-c4528f248f72",
          "device": "/dev/vda",
        }
      ]
    },

我的服务器API响应

{
      "id": "1879f47f-1c5e-464b-bb76-e7cc13ef426e",
      "name": "olakital",
      "flavor": {
        "id": "21f46a72-7f4f-40c5-9f1f-0100fadbc226",
        "disk": "10",
        "ram": "4000",
        "swap": "",
        "vcpus": "4"
      }
    },
    {
      "id": "b9c7e32a-bf99-4250-83cb-13523f9c1604",
      "name": "teste01",
      "flavor": {
        "id": "59fc4d83-156d-4aa6-84a7-ea1c90d0fde5",
        "disk": "20",
        "ram": "8",
        "swap": "200",
        "vcpus": "4"
      }
    }

Answer 1

试一试，我还没有完全测试过，但是根据我收集的信息和您显示的数据，当您根据附件中的服务器 ID 过滤卷时，似乎是这样，您没有返回音量，主要是因为没有返回任何内容 this.servers 中的音量属性将是 empty array 或 undefined；

  ngOnInit(): void {
    forkJoin(this.serverService.getServer(), 
    this.storage.getVolumes())
    .pipe(takeWhile(() => this.alive))
    .subscribe(([servers, volumes]) => {
      this.volumes = volumes;
      this.servers = servers.map((server) => ({
        ...server,
        volumes: volumes.reduce((filteredVolumes, volume) => { 
            const found = volume.attachments
              .filter(attachment => attachment.name && attachment.server_id === server.id);

            if(!!found.length) {
              filteredVolumes.push(volume);
            }
         
            return filteredVolumes;
        }, [])
      }))
    })
  }

Answer 2

如果我真的理解您的要求，您可以过滤包含 server_id 附件的有效卷（名称不为空的卷）。试试这个代码：

ngOnInit(): void {
    forkJoin(this.serverService.getServer(), 
    this.storage.getVolumes())
    .pipe(takeWhile(() => this.alive))
    .subscribe(([servers, volumes]) => {
      this.volumes = volumes;
      this.servers = servers.map((server) => ({
        ...server,
        volumes: volumes.filter(volume => volume.name && volume.attachments.some(attachment => attachment.server_id == server.id))

      }))
    })
  }

HTML: 

<span *ngFor="let server of servers "> 
    <span *ngFor="let attachedVolume of server.volumes "> 
         {{attachedVolume.name}}
    </span>
</span>

更新：如果你切换到这个怎么办？这样就可以直接查看存储分配给了哪个服务器：

ngOnInit(): void {
    forkJoin(this.serverService.getServer(), 
    this.storage.getVolumes())
    .pipe(takeWhile(() => this.alive))
    .subscribe(([servers, volumes]) => {
      this.volumes = volumes.map(volume => ({
          ...volume,
          servers: servers.filter(server => volume.attachments.some(attachment => attachment.server_id == server.id))
       })),
      this.servers = servers;
    })
  }

HTML:

<ng-container *ngFor="let volume of volumes">
    <tr *ngIf="volume?.name.length > 2" (click)="selectVolume = volume">
        <td>  
            <div class="user-info">
                <div class="user-info__img">
                    <img src="./assets/img/storages.svg" alt="UserImg">
                </div>
                <div class="user-info__basic">
                    <h5 class="mb-0">{{volume.name}}</h5>
                </div>
            </div>
        </td>
        <td >{{volume.size}} GB</td>

        <td>
            <span *ngFor="let server of volume.servers">
              {{server.name}}
            </span>
        </td>
</ng-container>

Angular 从另一个数组的结果验证一个数组内的值

Angular verify value inside an array from the result another array

javascript

arrays

ng-bootstrap

angular