[对象对象]，[对象对象]对象数组中角html中的误差

Question

我有一个疑问，我只想展示一下数组的一些特定字段，我怎么能做到呢？

                            <div  class="form-check"  *ngFor="let periodo of filterPeriodos()">
                          <div>{{periodo.periodos | json}}</div>
                            <input  class="form-check-input mr-2" type="radio" id="{{'periodo' + periodo.periodos.id}}" value="{{periodo.periodos.id}}"
                                formControlName="periodo" (change)="changePeriodo(periodo)">
                            <label class="form-check-label" for="{{'periodo' + periodo.periodos.id}}">
                                {{ periodo.periodos.periodo }}
                                <span class="text-danger">{{ formGeral.value.vFrete | currency: 'BRL' }}</span>
                            </label>
                        </div>

例如，我尝试访问periodo.periodos.periodo属性，但是它没有返回html中的任何内容。

  filterPeriodos() {
let object = this.formGeral.value.data;
let jsDate = new Date(object.singleDate?.jsDate);
jsDate.setUTCHours(23,59,59,999);
this.dataFormat=jsDate
const d = new Date(jsDate );
if (this.storeS.layout.emp.id === 1) {
    if(this.formGeral.value.entregaBool){
        return this.transporte.filter( transpId =>   transpId.tipo === "RETIRA" ) ;
     }
}
  return (this.transporte);
 }

json

[{"id":1,"emp_id":1,"nome":"Retirada na Loja","tipo":"RETIRA","subtipo":null,"latLng":[-25.45264,-49.26653],"vFreteMin":0,"vFreteGratis":null,"periodos":[{"id":8,"transporte_id":1,"ativo":1,"periodo":"Comercial (das 8h às 19h)","corte":"16:00","data":null,"week":[0,1,1,1,1,1,1]},{"id":16,"transporte_id":1,"ativo":1,"periodo":"Domingos ou Feriado (Das 9h as 14h)","corte":"12:00","data":null,"week":[1,0,0,0,0,0,0]}]},{"id":2,"emp_id":1,"nome":"Frota Própria","tipo":"FROTA","subtipo":null,"latLng":[-25.4522,-49.267],"vFreteMin":0,"vFreteGratis":80,"periodos":[{"id":4,"transporte_id":2,"ativo":1,"periodo":"COMERCIAL (9h as 19h)","corte":"16:00","data":"2022-03-24","week":[0,1,1,1,1,1,1]},{"id":17,"transporte_id":2,"ativo":1,"periodo":"Domingos ou Feriados (Das 9h as 14h)","corte":"09:30","data":null,"week":[1,0,0,0,0,0,0]}]},{"id":20,"emp_id":1,"nome":"Correios (PAC)","tipo":"TRANSP","subtipo":null,"latLng":[-25.4522,-49.267],"vFreteMin":null,"vFreteGratis":null,"periodos":[{"id":18,"transporte_id":20,"ativo":1,"periodo":"Comercial (Das 8h as 18h)","corte":"17:30","data":null,"week":[0,1,1,1,1,1,1]}]}]

Answer 1

periodo.periodos是一个数组，因此必须运行另一个*ngFor才能访问其中的每个元素。

<div  class="form-check"  *ngFor="let periodo of filterPeriodos()">
   <div *ngFor="let item of periodo.periodos">json}}
     <div> {{ item.periodo }}</div>
   </div>

json数据和*ngFor的映射：

​