Question

export class ProvinciaComponent extends CatalogoGenerico implements OnInit, 
    AfterViewInit {
       page: Page = new Page({sort: {field: 'descripcion', dir: 'asc'}});
       dataSource: ProvinciaDataSource;
       columns = ['codprovincia', 'codprovinciasc', 'descripcion', 'pais.codpais','pais.descripcion'];
       labelColumns = {
          'codprovincia': {'label': 'Código', 'width': '60', 'align': '', 'format': ''},
          'codprovinciasc': {'label': 'Código INEC', 'width': '60', 'align': '', 'format': ''},
          'descripcion': {'label': 'Descripción', 'width': '60', 'align': '', 'format': ''},
          'pais.codpais': {'label': 'Cod. Pais', 'width': '60', 'align': '', 'format': ''},
          'pais.descripcion': {'label': 'Pais', 'width': '60', 'align': '', 'format': ''}
    };
    headerColumns = this.columns.concat(['actions']);
    displayedColumns = this.headerColumns;
}

和我的模板

<mat-table [dataSource]="dataSource" matSort matSortActive="descripcion" matSortDirection="asc"
                 matSortDisableClear>
        <ng-container [cdkColumnDef]="column" *ngFor="let column of columns">
          <mat-header-cell *matHeaderCellDef mat-sort-header>{{labelColumns[column].label}}</mat-header-cell>
          <mat-cell *matCellDef="let element"> {{element[column]}} </mat-cell>
        </ng-container>
        <!-- Column Definition: actions -->
        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef>Acciones</mat-header-cell>
          <mat-cell *matCellDef="let row; let i=index;">
            <div class="actions">
              <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Open basic menu"
                      [disabled]="!permiso.is_edit && !permiso.is_remove">
                <mat-icon>more_vert</mat-icon>
              </button>
              <mat-menu #menu="matMenu">
                <button mat-menu-item (click)="openPopUp(row, row.idprovincia)"
                        *ngIf="permiso.is_edit">
                  <mat-icon>edit</mat-icon>
                  <span>Editar</span>
                </button>
                <button mat-menu-item (click)="eliminarProvincia(row)"
                        *ngIf="permiso.is_remove">
                  <mat-icon>delete</mat-icon>
                  <span>Eliminar</span>
                </button>
              </mat-menu>
            </div>
          </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns;"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

      </mat-table>

信息的结构如下

我想访问国家对象的lol属性，即如果我想访问行['country']，我会得到国家对象，但我想访问对象的属性，即行['pais.codpais']，关于如何执行此操作的一些想法，请考虑以下形式因为我在组件内的数组中定义了键，所以列表中的信息已经准备好了。

columns = ['codprovince', 'codprovinciasc', 'description', 'pais.codpais', 'pais.descripcion'];

Answer 1

在javascript中，您不必严格使用[]（方括号）来访问属性，您可以像results.pais一样直接访问，而访问其属性只需像{{1} }或results.pais.codpais等...

最终使用方括号的唯一用例是必须访问以下属性：

results["pais"]["codpais"]

如果您需要使用var property = "codpais" console.log(results.pais[property])（"deepObject.deepProperty"）中的object 来迭代对象，则可以将字符串拆分为点并执行以下操作：

object.deepObject.deepProperty

或者，如果您可以使用ES6，这里有一个简单的衬纸：

 function iterateObject(object, key) {
   var property = key
   var properties = key.split('.')

   if (!!properties && properties.length  0) {
     property = properties[0]

     // Check if there's not an empty string in cases like `property.`
     if (!!properties[1]) {
       const nextProperties = key.replace(property, '')

       return iterateObject(object[property], nextProperties)
     }

     return object[property]
   }

   return object[property]
 }

并像这样使用它：

function iterateObject(object, key) { 
  return key.split('.').reduce((r, p) => (r[p] || r), object)
}

访问字典子元素打字稿

1 个答案: