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>

由于使用了[[ngModel）]，我现在已经删除了ngForm。我们使用了反应式或ngModel方式。

ts

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

selectedEmail = {};

注意：代码是直接在stackoverflow编辑器中编写的，因此可能存在一些拼写错误或语法错误。请纠正自己。

Angular-使用* ngfor时的undefined属性，（更改）

1 个答案:

html

ts