Не удалось связать данные из файла ts в угловых 6

Question

Я новичок в Angular. Я хочу связать данные, когда я отправляю данные в виде текстового поля и выпадающего списка в таблице. Хотя в консоли я вижу, что я набираю в текстовом поле и выпадающем списке. Вот мой код файла ts, который я строчил Json.

{
event.preventDefault();
const target = event.target;
const ddlParticulars = target.querySelector("#ddlParticulars").value;

const ddlmonth = target.querySelector("#ddlmonth").value;
 // const txtammount = target.querySelector("#txtammount").value;
const ddlaccyear = target.querySelector("#ddlaccyear").value;
const ddlcuryear = target.querySelector("#ddlcuryear").value;
this.receiptList.push({
  ddlParticulars: ddlParticulars,
//  txtammount: txtammount,
  ddlmonth: ddlmonth,
  ddlaccyear: ddlaccyear,
  ddlcuryear: ddlcuryear
});
this.receiptListJson = JSON.stringify(this.receiptList);
console.log("receiptList " + this.receiptListJson);

}

А вот и мой HTML

 <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">SL#</th>
            <th scope="col">Particulars</th>
            <th scope="col">Cr.ID</th>
            <th scope="col">Ammount</th>
            <th scope="col">Month</th>
            <th scope="col">Accademic Year</th>
            <th scope="col">Current Year</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of receiptList; index as i">
            <th scope="row">{{i+1}}</th>
            <td>{{item.ddlParticulars}}</td>
            <td>1</td>
            <td>1</td>
            <td>{{item.ddlmonth}}</td>
            <td>{{item.ddlaccyear}}</td>
            <td>{{item.ddlcuryear}}</td>

          </tr>
        </tbody>
      </table>

Здесь по пункту и циклу я не могу получить переменную в файле TS. Пожалуйста, помогите мне.