Question

我的服务是返回地图。现在我想使用我的模板中的一个值，但它不会显示，我不明白为什么。

我创造了一个例子：

通过显示的构造函数设置1个值，另外2个通过observable设置。第一个（＆＃39; myKey＆＃39;）显示另一个不是。

@Injectable()
export class MessageService {

    loadTestData(): Observable<Map<string, string>> {
        const testData = new Map<string, string>();
        testData.set('mySecondKey', 'mySecondValue');
        testData.set('myThirdKey', 'myThirdValue');

        return Observable.of(testData);
    }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <h3>Shown: {{test.get('myKey')}}</h3>
      <h3>Not shown: {{test.get('mySecondKey')}}</h3>
      <h3>Map size: {{test.size}}</h3>
    </div>
  `,
})
export class App implements OnInit {
  name:string;
  test: Map<string, string> = new Map<string, string>();

  constructor(private messageService: MessageService) {
    this.name = `Angular! v${VERSION.full}`
    this.test.set('myKey', 'myValue');
  }

  ngOnInit() {
    this.messageService.loadTestData().subscribe(data => {
      this.test = data;
    });

  }
}

https://plnkr.co/edit/6mUieUMJTSvekiNxEuU3

Answer 1

实际上，代码完全正常，只有一个例外 - 缺少import { Observable } from 'rxjs/Rx';的导入。似乎当前的SystemJS配置正在吞噬错误。

此处更新了plnkr - https://plnkr.co/edit/WyQzOos0IOnvRZkzWSRS?p=preview

Answer 2

这是因为您没有等待订阅的数据abd尝试在值到达之前呈现它。修改您的代码如下

在你的组件中声明一个布尔变量

private dataAvailable:boolean=false;

并在数据可用后切换值

ngOnInit() {
    this.messageService.loadTestData().subscribe(data => {
      this.test = data;
this.dataAvailable=true;

    });

  }

并在模板中等待值

<div *ngIf="dataAvailable">
      <h2>Hello {{name}}</h2>
      <h3>Shown: {{test.get('myKey')}}</h3>
      <h3>Not shown: {{test.get('mySecondKey')}}</h3>
      <h3>Map size: {{test.size}}</h3>
    </div>

它应该可以解决问题。您也可以使用异步管道来实现相同的目标。您可以找到文档here。希望它有所帮助

从模板中的地图中读取值（通过可观察的方式设置）

2 个答案: