要在Angular 6模板中访问JavaScript变量并获取异步数据，可以使用*ngIf和异步管道。

以下是一个解决方法的示例：

1. 在组件中声明一个JavaScript变量，并获取异步数据：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  data: any;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('https://api.example.com/data').subscribe(response => {
      this.data = response;
    });
  }
}

2. 在模板中使用*ngIf来检查变量是否已经加载完成，然后获取数据：

  
{{ data.property }}

3. 使用异步管道来处理数据的加载状态：

  
{{ dataObj.property }}

在这个示例中，*ngIf指令用于检查data变量是否已经加载。如果已经加载，就会显示数据。异步管道“async”用于处理数据的加载状态，将加载中的状态显示为加载的数据。

注意：在使用HttpClient模块之前，确保已经在模块中导入HttpClientModule。