гнездо для петли в угловой 7

Question

this.listz= this.list;
this.filtered= this.allTitles;
const list: string[] =[];

this.allTitles.forEach ((value) => {
  const firstLetter = value.titleName.substr(0, 1 ).toUpperCase();
  const index = list.indexOf(firstLetter);
  if (firstLetter.match(/[A-Z]/i)) {
    value.list = firstLetter; 
  } else {
    value.list = '#';
    if (list.indexOf('#') === -1) {
      list.push('#');
    }
  }
  if (index === -1 && (firstLetter.match(/[A-Z]/i))) {
    list.push(firstLetter);
    this.list = list.sort();
  }
});

<div *ngFor="let list of listz"> <div>{{list}}</div> <div class="title-card-group" *ngFor="let titleGroup of filtered | group | order"> <div *ngIf="titleGroup.list == list"></div> </div> </div>

У меня есть объект Json, со ссылкой на этот объект JSON, я построил массив, я пытаюсь перебрать логику в HTML с вложенным циклом for (angular 7), когда во вложенной логике не работает, при самостоятельном использовании логика работает

при загрузке страницы, я получаю объект JSON в качестве ответа, я строю массив с объектом JSON, массив имеет уникальныйзначения, и я пытаюсь отобразить объект json относительно массива, цикл завершается неудачно

Пожалуйста, помогите мне исправить это, спасибо!

РЕДАКТИРОВАТЬ: Добавление JSONиз комментариев:

[
   {
      "titleName":"Campione! - Volume 1 - Heretic God",
      "titleId":"third/reader/l07261",
      "list":"C"
   },
   {
      "titleName":"Dampione! - Volume 1 - Heretic God",
      "titleId":"third/reader/l0726",
      "list":"D"
   },
   {
      "titleName":"Fampione! - Volume 1 - Heretic God",
      "titleId":"third/reader/l072",
      "list":"F"
   },
   {
      "titleName":"_ampione! - Volume 1 - Heretic God",
      "titleId":"third/reader/l07",
      "list":"#"
   },
   {
      "titleName":"1ampione! - Volume 1 - Heretic God",
      "titleId":"third/reader/l0",
      "list":"#"
   }
]