Question

我的疑问是以下问题，我有两个组件，一个是presentation，另一个是角度9的容器，当我尝试在组件容器中导入presentation的组件时，给了我一个语法错误，希望您能帮助您解决问题。谢谢

current-weather.component.ts

import { Component, OnInit } from '@angular/core';
import { CurrentWeatherService } from '../services/current-weather.service';

@Component({
  selector: 'app-current-weather',
  templateUrl: './current-weather.component.html',
  styleUrls: ['./current-weather.component.scss'],
})
export class CurrentWeatherComponent implements OnInit {
  constructor(public weatherService: CurrentWeatherService) {}

  ngOnInit() {

  }
}

weather-card.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Weather } from 'src/structures/weather.structure';

@Component({
  selector: 'app-weather-card',
  templateUrl: './weather-card.component.html',
  styleUrls: ['./weather-card.component.scss']
})
export class WeatherCardComponent implements OnInit {

  @Input() weather : Weather;

  constructor() { }

  ngOnInit(): void {
  }

}

current-weather.component.html

<app-weather-card [weather]="weatherService.weather$ | async as weather" ></app-weather-card>

模板解析错误：解析器错误：[weatherService.weather $ | |中的第33列出现意外标记'as'异步天气]，位于C：/Projects/projects-angular/weatherapp/src/app/current-weather/current-weather.component.html@0：29（“] weatherService.weather $ |异步天气”>“）：C：/Projects/projects-angular/weatherapp/src/app/current-weather/current-weather.component.html@0：29

Answer 1

xxx$ | async as xxx指令仅支持*ngIf语法。您遇到的错误是因为您正在组件输入绑定中使用它。

如果您只订阅一个，则不需要它，但是如果您确实想要，则需要执行以下操作：

<app-weather-card *ngIf="weatherService.weather$ | async as weather" [weather]="weather"></app-weather-card>

在文档中将其称为“将条件结果存储在变量中”：

您可能希望显示同一对象的一组属性。如果您在等待异步数据时，该对象可以是未定义的。在在这种情况下，您可以使用ngIf并将条件的结果存储在本地变量，如以下示例所示。

此代码仅使用一个AsyncPipe，因此仅一个订阅创建。条件语句存储的结果 userStream|async在本地变量用户中。然后，您可以绑定本地用户反复。

https://angular.io/api/common/NgIf#storing-a-conditional-result-in-a-variable

模板解析错误，组件角度9中存在错误

1 个答案: