如何在插值中访问对象的数组值？

Question

这是我的 json 数据：

我想在插值中访问标记的键 (fundAllocated)，但我无法访问它。它在 schemeFunds 数组中。我怎样才能访问它？

这是我试过的：

<ng-container *ngIf="financialManagementData && financialManagementData.length">
  <tr *ngFor="let fManagement of financialManagementData">
    <td>{{fManagement.name}}</td>
    <td>
      <ng-container *ngIf = "fManagement['selectedScheme']; else showFundAmount; 
       let i = index">
        <div class="form-group mb-0">
          <div class="d-flex justify-content-center">
            <div>
              <input type="text" class="form-control fund-amount height-30"
              [(ngModel)]="fManagement.fundAmount" name="fundAmount">
            </div>
            <div>
              <button class="btn btn-primary btn-sm color-white mb-0" 
              (click)="fManagement['selectedScheme'] = 
              fManagement['selectedScheme'];">
                Save
              </button>
            </div>
          </div>
        </div>
      </ng-container>
      <ng-template #showFundAmount>
        <div class="d-flex justify-content-center">
          <div class="fund-amount">
            {{fManagement['schemeFunds']['fundAllocated']}}
          </div>
          <span class="text-primary f_16 c_p">
            <i class="fas fa-edit" (click)="fManagement['selectedScheme'] = ! 
            fManagement['selectedScheme']; checkIsEditable(fManagement)"></i>
          </span>
        </div>
      </ng-template>
    </td>
    <td>{{fManagement.fundUtilized}}</td>
    <td>{{fManagement.balance}}</td>
    <td>
      <button class="btn btn-primary btn-sm color-white mb-0" 
      (click)="createTransaction(fManagement)">
        Create Transaction
      </button>
    </td>
  </tr>
</ng-container>

Answer 1

看起来您正在尝试直接获取属性，即使它是数组元素的属性。

因此，与其这样做 fManagement['schemeFunds']['fundAllocated']，不如 fManagement['schemeFunds'][0]['fundAllocated']。它采用 schemeFunds 元素（包含一个数组），选择第一个数组元素（索引 0）并采用该元素的属性 fundAllocated .

编辑：您很可能需要使用 ngFor 遍历数组并显示 schemeFunds 数组中每个元素的预期信息。

Answer 2

您需要额外的 *ngFor 循环专门用于 schemeFunds 数组

<ng-template #showFundAmount>
  <div class="d-flex justify-content-center">
    <ng-container *ngFor="let amount of fManagement['schemeFunds']">
      <div class="fund-amount">{{amount['fundAllocated']}}</div>
    </ng-container>
    <span class="text-primary f_16 c_p">
      <i class="fas fa-edit"
        (click)="fManagement['selectedScheme'] = ! fManagement['selectedScheme']; checkIsEditable(fManagement)"></i>
    </span>
  </div>
</ng-template>

或者如果您确定 schemeFunds 数组总是只有一个元素，您可以直接访问数组的第 0 个元素。

<ng-template #showFundAmount>
  <div class="d-flex justify-content-center">
    <div class="fund-amount">{{fManagement['schemeFunds'][0]['fundAllocated']}}</div>           <!-- element at 0th position -->
    <span class="text-primary f_16 c_p">
      <i class="fas fa-edit"
        (click)="fManagement['selectedScheme'] = ! fManagement['selectedScheme']; checkIsEditable(fManagement)"></i>
    </span>
  </div>
</ng-template>

顺便说一句，如果情况 2 适用，您需要在后端对其进行调整以将 schemeFunds 作为对象而不是具有单个元素的数组发送。然后你可以在没有数组键的情况下直接访问 fundAllocated：fManagement['schemeFunds']['fundAllocated']

如果 `fundAllocated` 不可用则显示 0

如果属性不可用，您可以在插值表达式中附加一个 OR 以显示 0。

<div class="fund-amount">{{fManagement['schemeFunds'][0]['fundAllocated'] || 0}}</div>

Answer 3

还有一点需要注意您的代码， 您需要将上下文传递给 ng-template #showFundAmount，目前它无法访问 fManagement。

*ngIf = "fManagement['selectedScheme']; else showFundAmount; let i = index"

变成

*ngIf = "fManagement['selectedScheme']; else showFundAmount;context : { $implicit : fManagement }; let i = index; "

你的 ng-template 变成：

<ng-template #showFundAmount let fManagement>

如何在插值中访问对象的数组值？

How to access object's array value in interpolation?

angular

angular8

如果 `fundAllocated` 不可用则显示 0

如何在插值中访问对象的数组值？

How to access object's array value in interpolation?

angular

angular8

如果 fundAllocated 不可用则显示 0

如果 `fundAllocated` 不可用则显示 0