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

Question

In my Angular project I am trying to access the value present in <td [innerHTML]='rupee.replaceHTML' #term></td> and assign it to vaiable newdata.

More on the functionality here, I have 2 buttons change and concourse . The value present in below HTML will change when I press concourse button. I was to save that changed value in variable newdata using localStorage so that I can access it later.

How can I access that html value and store it in new_data ?

.html file

<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

            

component.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));
}

Interface

export interface DraneMan {
  maan:string;
}

Answer 1

You already have a @ViewChild('term') so you can just get it from this.editElem.innerHTML .

What's more, you have a binding [innerHTML]='rupee.replaceHTML' , so, reading from the DOM something that is bound seems like the wrong data flow. I would just use ruppee.replaceHTML as source of truth.