Can i use async pipe when calling .all() method

[habatmu-birhanu]

For example my component.ts look like this

`@Component({
  selector: 'app-roles-list',
  templateUrl: './roles.component.html',
})
export class RolesComponent implements OnInit {

  public roles: Observable<DocumentCollection<Role>>;

  constructor(private rolesService: RolesService) { }

  ngOnInit() {
    this.roles = this.rolesService.all();
  }

}`

and i want to use like below in my template how do i achieve this

` <tbody>
          <tr *ngFor="let role of roles.data | async ">
            <td>{{ role.attributes.name }}</td>
            <td>{{ role.attributes.application_type }}</td>
            <td>
              <a class="badge badge-success" routerLink="{{ role.id }}">Edit</a>
            </td>
          </tr>
        </tbody>
      </table>`

[maxi7587]

You must pass an observable to the async pipe (roles.data has type Array<Resource>, it should be Observable<Array<Resource>>).

As you are using with *ngFor, you should map the response using rxjs and then use it in the async pipe. Here is an exmple:

this.roles_data = this.rolesService.all().pipe(
            map(roles => {
                return (<Array<Role>>roles.data);
            })
        );

Then, in the view:

<tr *ngFor="let role of roles_data | async ">
    <td>{{ role.attributes.name }}</td>
    <td>{{ role.attributes.application_type }}</td>
    <td>
        <a class="badge badge-success" routerLink="{{ role.id }}">Edit</a>
    </td>
</tr>