Angular - 如何从 typescript 访问模板变量/引用？

Question

在我的 Angular 项目中，我试图访问<td [innerHTML]='rupee.replaceHTML' #term></td>中存在的值并将其分配给可变的新数据newdata.

更多关于这里的功能，我有 2 个按钮change和concourse 。 当我按下concourse按钮时，HTML 下面的值会改变。 我将使用localStorage将更改后的值保存在变量newdata中，以便以后可以访问它。

如何access that html value and store it in new_data ？

.html文件

<mat-list-item>New Life</mat-list-item>
 <mat-list class="textFields">
   <table>
     <tr>
       <td [innerHTML]='rupee.replaceHTML' #term></td> ---> Access whatever value is here
      </tr>
     </table>                
 </mat-list>

//button
<button mat-raised-button type='button' (click)='concourse(kada, term)'>Confirm

            

组件.ts

export class Pinky { 
  @ViewChild('term') editElem!: ElementRef<HTMLTableDataCellElement>;
    

//button function       
concourse(rec: FillData, nada: HTMLTableDataCellElement) {
  const { a,b,c,d } = rec;
  let maan= nada.innerText;
  localStorage.setItem('FillData', JSON.stringify(rec));

   var new_data = JSON.parse(localStorage.getItem('FillData') || '{}') as FillData

-------------------//Can I access #term value here?-------------------------

    new_data.{{?}}= maan;                 ----------> Assign the  value here ?
    localStorage.setItem('FillData', JSON.stringify(new_data));
}

界面

export interface DraneMan {
  maan:string;
}

Answer 1

您已经有一个@ViewChild('term') ，因此您可以从this.editElem.innerHTML中获取它。

更重要的是，您有一个绑定[innerHTML]='rupee.replaceHTML' ，因此，从 DOM 读取绑定的内容似乎是错误的数据流。 我只会使用ruppee.replaceHTML作为事实来源。