Angular - неопределенное свойство при использовании * ngfor, (изменить)

Question

Я хочу вставить текст из объекта в область ввода (который является редактором PrimeNG и работает как текстовое поле) после того, как пользователь выбирает параметр из области выбора,

Как вы можете видеть на элементе (change) на <select>, я отправляю два элемента, первый элемент работает нормально, а второй - как undefined, и я не уверен почему!

Я попытался определить этот элемент с помощью #, но он тоже не работает. Я гуглил и много читал о нем, но не могу найти способ прочитать этот элемент. Спасибо за ваше время!

HTML:

 <div *ngFor="let disparaEmail of listaAvisos; let i=index" [formGroup]="disparaEmail" class="ui-g-4" style="margin-right: 10px; border: 1px solid #c8c8c8; border-radius: 5px; min-width: 466.828px;">

       <p class="titulo-campo font1 fw700" style="padding-top: 10px;">Tipo de Aviso:</p>
           <select class="fw500 font1 inputtb" formControlName="fkTipAvi" [(ngModel)]="disparaEmail.selTipAvi" (change)="atualizaEditor(disparaEmail.selTipAvi, disparaEmail.selMsgTipo)">
               <option value="">---Selecione---</option>
               <option *ngFor="let tipAvi of listaTipoAviso" value="{{tipAvi.id}}">
                 {{tipAvi.assuntoPd}}
               </option>
           </select>

       <p class="titulo-campo font1 fw700" style="padding-top: 10px;">Mensagem:</p>
       <p-editor [style]="{'height':'300px'}" formControlName="msgTipo" [(ngModel)]="disparaEmail.selMsgTipo" required> </p-editor>

 </div>

TS:

constructor(
//...
){
    this.listaTipoAviso = new Array<TipoAviso>();
        this.tipoAvisoService.listarTipoAvisos().then((data: any) => {
           //Feeding this element
        }
    })
}

atualizaEditor(selTip, editorMsg){
    let procuraLista = this.listaTipoAviso;
    procuraLista = procuraLista.filter(item=>
    Object.keys(item).some(k => item[k] != null && 
        item[k].toString().toLowerCase()
        .includes(selTip))
    );
    console.log("Value: " + procuraLista[0].msgPd + ". Editor: " + editorMsg);

    editorMsg = procuraLista[0].msgPd;

}

Answer 1

Позвольте мне повторить ваш вопрос.

У вас есть поле выбора, в котором есть список сложных объектов. Объект имеет свойства selTipAvi и selMsgTipo и т. Д. Теперь, когда пользователь выбирает любую опцию из поля выбора, свойство selMsgTipo выбранного элемента будет отображаться в p-editor, и пользователь может редактировать, если хочет.

Для достижения вышеописанного сценария мы можем упростить ваш код как -

HTML

<div *ngFor="let disparaEmail of listaAvisos; let i=index" class="ui-g-4" style="margin-right: 10px; border: 1px solid #c8c8c8; border-radius: 5px; min-width: 466.828px;">

       <p class="titulo-campo font1 fw700" style="padding-top: 10px;">Tipo de Aviso:</p>
           <select class="fw500 font1 inputtb" [(ngModel)]="disparaEmail.selTipAvi" #selectEmail (change)="selectedEmail = selectEmail.value ">
               <option value="">---Selecione---</option>
               <option *ngFor="let tipAvi of listaTipoAviso" [value]="tipAvi">
                 {{tipAvi.assuntoPd}}
               </option>
           </select>

       <p class="titulo-campo font1 fw700" style="padding-top: 10px;">Mensagem:</p>
       <p-editor *ngIf="selectedEmail" [style]="{'height':'300px'}" [(ngModel)]="selectedEmail.selMsgTipo" required> </p-editor>

 </div>

Я удалил ngForm, поскольку [(ngModel)] используется. Мы использовали или идти с реактивным или ngModel способом.

ц

constructor(
//...
){
    this.listaTipoAviso = new Array<TipoAviso>();
        this.tipoAvisoService.listarTipoAvisos().then((data: any) => {
           //Feeding this element
        }
    })
}

selectedEmail = {};

Примечание: код был написан непосредственно в редакторе stackoverflow, поэтому возможна опечатка или синтаксическая ошибка. Пожалуйста, исправьте себя.