Angular 6/TypeScript/JavaScript içinde nesne dizisi içinde bulma

Angular 6 uygulamamın HTML şablonunda aşağıdaki koda sahibim.

<div *ngIf ="conversation.participants[conversation.updatedBy.toLowerCase()].firstName">somedata </div>

Aslında katılımcılar dizisinin içinde updatedBy değerine göre arama yapmaya çalışıyorum ve eşleşen nesnenin firstName özelliğinin null olup olmadığını görmek istiyorum ama bana firstName tanımlı değil hatası veriyor.

] parantezlerinden sonra aşağıdaki gibi soru işareti koymayı da denedim ama herhangi bir sonuç vermedi.

conversation.participants[conversation.updatedBy.toLowerCase()]?.firstName

Aşağıda bir json nesnesi bulunmaktadır

"participants": [{
        "dateJoin": 1520409578,
        "dateLeft": 0,
        "firstName": "edh",
        "internalId": 165,
        "invitedBy": "edh",
        "lastName": "edh",
        "userId": "edh"
    }, {
        "dateJoin": 1520409578,
        "dateLeft": 0,
        "firstName": "",
        "internalId": 166,
        "invitedBy": "edh",
        "lastName": "",
        "userId": "ATB"
    }],
    "dataInAB": "ATB",
    "subject": "test ",
    "unreadMessageCount": 0,
    "updateDate": 1520585258,
    "updatedBy": "atb"
}

Bunun hakkında bildiğiniz bir şey varsa lütfen bana bildirin.

Teşekkürler

Cevap #1

Component.ts dosyanızda, *ngIf içinde kullandığınız boolean sonucu saklayacak bir değişken bildirmeniz gerekiyor. Ayrıca, conversation değişkeni değiştiğinde bu değeri güncelleyin.

Örneğin, component.ts içinde

let firstNameExists = false;

getConversationData(){
  this.conversation = ....
  this.firstNameExists  = this.conversation.participants.find(m=>m.userId.toLowerCase()==this.conversation.updatedBy).firstName? true: false;
}

ve sonra component.html dosyanızda

<div *ngIf ="firstNameExists">somedata </div>

Not: Bu ifade ts'de kullanılıyor çünkü Angular bağlamalarında ifadeler kullanmak çok kötü bir uygulamadır.

Cevap #2

this.conversation.participants.find(x => x.userId.toLowerCase() === this.conversation.updatedBy).firstName;

stackblitz