如何訪問 angular 中接口的屬性

Question

我有這個接口，我想從另一個組件訪問它的 ID 屬性

export interface IItem {
 id: number;
 status: any;
peso: number;
medidas: any;
quantidade: number;
tabela: {
itemTabela_id: number;
item_id: number;
vPromo: number;
vPromoData: any;
vVenda: number;
};
estoque: {
estAtual: number;
item_id: number;
};
item_linkWeb: any;
descricao: string;
fotos: Array<string>;

}

例如，我如何訪問她的 object ID？

test(){
console.log(item: IItem)
}

在這部分代碼中，它逐項顯示正常項目的 output，function updateQuantidade在控制台中返回正常 item.id

<tr *ngFor="let item of cartS.cart.item; let i = index">
            <td>
              <figure class="media">
                <div class="img-wrap" *ngIf="item.fotos">
                  <img src="https://esal.api.alleshub.com.br/images/erp_{{layout}}/item/{{
                      item.fotos[0]
                    }}.jpg" class="img-thumbnail img-sm" alt="{{item.item_linkWeb.linkWeb.titulo}}" />
                </div>
                <figcaption class="media-body">
                  <h6 class="title text-truncate" style="max-width: 350px;">
                    {{ item.item_linkWeb.linkWeb.titulo }}
                  </h6>
                  <!-- <dl class="dlist-inline">
                    <dt>Variação:</dt>
                    <dd>G</dd>
                  </dl>
                  <dl class="dlist-inline">
                    <dt>Cor:</dt>
                    <dd>Vermelha</dd>
                  </dl> -->
                </figcaption>
              </figure>
            </td>
            <td style="padding-top: 1.2em">

              <div>
                    <input class="form-control" [(ngModel)]="quantidade" (ngModelChange)="updateQuantidade(item)" type="number" name="quantity" min="1" max="{{this.item.estoque.estAtual}}"/>
               </div>
            </td>
            <td>
              <div class="price-wrap">
                <var class="price">{{
                  (item.tabela.vPromo || item.tabela.vVenda) *
                  item.quantidade | currency: "BRL"
                  }}</var>
                <small class="text-muted">({{
                  item.tabela.vPromo || item.tabela.vVenda
                  | currency: "BRL"
                  }}
                  cada)</small>
              </div>
            </td>
            <td class="text-right">
              <!-- <a data-original-title="Salvar na lista de desejos" title="" href="" class="btn btn-outline-success"
                data-toggle="tooltip">
                <i class="fa fa-heart"></i></a> -->
              &nbsp;
              <button type="button" class="btn btn-outline-danger" data-toggle="modal"
                data-target="#modalConfirmDelete" (click)="excluirItemCart(i)">
                <i class="fa fa-trash"></i>
              </button>
            </td>
          </tr>

更新量

updateQuantidade( item: IItem) {
console.log(item)
console.log(item.id)
if (this.quantidade > item.estoque.estAtual) {
  this.quantidade = item.estoque.estAtual;
  this.modalS.createModal(MdAlertComponent, { title: 'Estoque insuficiente', message: `Só há ${item.estoque.estAtual} unidade(s) deste item em estoque` });
}
const index = this.cartS.cart.item.indexOf(item);
this.cartS.cart.item[index].quantidade = this.quantidade;
this.cartS.updateItem(item);
}

但是在另一個沒有 ngFor="let item of cartS.cart.item; let i = index"> 的 function 中，它總是返回 undefined

            <form>
          <div class="form-group">
            <label>Calcular o Frete</label>
            <div class="input-group">
              <input [(ngModel)]="cep" [ngModelOptions]="{standalone: true}" type="text" class="form-control"
                name="" placeholder="Digite o CEP" />
              <span class="input-group-append">
                <button (click)="getFreteByCep(cep,item)" [ngClass]="{'d-none': (loadingCep)}"
                  class="btn btn-success">Verificar</button>
                <div class="spinner-border" [ngClass]="{'d-none': (!loadingCep)}"
                  style="width: 2rem; height: 2rem;margin-left:5px;margin-top: 2px;"></div>
              </span>
            </div>
            <span class="small text-muted float-right mt-2 cursor-pointer" (click)="openMdNaoSeiCep()"><u>Não sei o CEP</u></span>
          </div>
          <div class="form-group">
            <label>Tem um cupom?</label>
            <span *ngIf="cupomAplicado" class="float-right text-danger cursor-pointer" (click)="retirarCupom()">Retirar cupom</span>
            <div class="input-group">
              <input style="height: 40px"
                type="text"
                class="form-control"
                placeholder="Código do cupom"
                [(ngModel)]="codCupom"
                [ngModelOptions]="{standalone: true}"
                [disabled]="cupomAplicado"
              />
                <div class="input-group-append cursor-pointer">
                    <span class="input-group-text py-1 justify-content-center text-light" [ngClass]="{'bg-success': (!loadingCupom)}" style="width: 62px; height: 40px;">
                        <a (click)="aplicarCupom()" [ngClass]="{'d-none': (loadingCupom)}">Aplicar</a>
                        <div class="input-group-text spinner-border" [ngClass]="{'d-none': (!loadingCupom)}" style="width: 2rem; height: 2rem;"></div>
                    </span>
                </div>
            </div>
          </div>
        </form>
 getFreteByCep(cep,item: IItem   ) {
console.log(item)
console.log(item.id)}

Answer 1

接口本身不保存值。 相反，它定義了指向實際值的引用類型。

您可以執行以下操作：

@Component({...})
export class MyComponent {
    private item: IItem;

    public test(): void {
        console.log(this.item);
        console.log(this.item?.status);
    }
}

但是除非你真的為你的變量設置了一個值，否則你將看到的只是undefined 。

Answer 2

現在，您的item具有名為IItem的界面形狀。 要訪問屬性，您只需執行以下操作：

item?.id
item?.tabela?.item_id

? 標記稱為可選鏈接運算符，用於防止針對未定義屬性的運行時錯誤。