CODEWITHSUNDEEP
vmware-clarity
Curtis Watson
Curtis Watson

Reputation: 43

Clarity Datagrid & Promise / Subject Bound Column

I have a data grid, with one column specifically that is bound to a function call.

  <clr-dg-column [clrDgField]="'Id'">ID</clr-dg-column>
  <clr-dg-column [clrDgField]="'Client'">Client</clr-dg-column>
  <clr-dg-column [clrDgField]="'Name'" [clrDgSortOrder]="ClrDatagridSortOrder.ASC">Name</clr-dg-column>
  <clr-dg-column [clrDgField]="'PublicKeyHash'">Public Key Hash</clr-dg-column>

  <clr-dg-row *clrDgItems="let clientLicense of ClientLicenses" [clrDgItem]="clientLicense">
    <clr-dg-cell>{{clientLicense.Id}}</clr-dg-cell>
    <clr-dg-cell>
      {{getClientName(clientLicense.ClientId)}}
    </clr-dg-cell>
    <clr-dg-cell>{{clientLicense.Name}}</clr-dg-cell>
    <clr-dg-cell>{{clientLicense.PublicKeyHash}}</clr-dg-cell>
  </clr-dg-row>

See the second column, where we call "getClientName(clientLicense.ClientId)". This method needs to run asynchronously; that is, upon request it will not immediately have a value. I'm a bit newer to Typescript / Angular, but I believe that I'm looking to return either a Promise or a BehaviorSubject (I've used these pretty extensively so far when retrieving records from my repositories by method call rather than binding / subscribing).

So, I've tried returning a Promise, BehaviorSubject, AsyncSubject all with the same result - the entire web browser locks hard and I have to end process (lol).

I understand that binding to a property, or pre-populating a property on my view model would be easiest; however due to architecture this isn't easy... I essentially have two separate repositories that are related via. foreign key; I'm pulling the client name from the client repository based on the client id on the license.

Below are a few variants of "getClientName(...)" that I've attempted. I've tried variants of calling in the HTML template (i.e. async on the promise, etc.). Any ideas?

BehaviorSubjuct

  public getClientName(id: string): BehaviorSubject<string> {
    var result: BehaviorSubject<string> = new BehaviorSubject("");

    this.clientRepo.getById(id).then(x => result.next(x.Name))

    return result;
  }

Promise

  public async getClientName(id: string): Promise<string> {
    var client: Client;

    client = await this.clientRepo.getById(id).then()

    var result: string = "";

    if (client) {
      result = client.Name;
    }

    return result;
  }

Upvotes: 0

Views: 222

Answers (1)

hippeelee
hippeelee

Reputation: 1808

Does the built in Angular async pipe work?

 <clr-dg-cell>{{getClientName(clientLicense.ClientId) | async}}</clr-dg-cell>

Upvotes: 1

Related Questions