如何从服务中获取数据到类中并将其发送到 html 组件

Question

所以我是 Angular 新手，正在尝试构建一个小项目。

如何从服务中获取数据到类中并发送到 html 组件？

// service.groups.ts

export class GroupService {
    public getAll(): void {
       return // httpService call...works!
    }
}

// groups.class.ts

import {GroupService} from '@core/services/group/group.service';

export class {
    protected constructor(private groupService: GroupService);

    public get groupData(): string {

        let data = this.groupService.getAll();

        // some extra filtering comes here

        return data;
    }
}

// wrapper.component.html

<wrapper[group]="groupData"></wrapper>

// wrapper.component.ts

export class WrapperComponent {
    @Input()
    public group: string;
}

// wrapper.html

<div>{{ group }}</div>//not working

Answer 1

您可以使用async 管道，因为您获得的数据是异步的。您可以像这样使用.html 文件：

<wrapper[group]="groupData | async"></wrapper>

一个重要的注意事项是async 自动订阅并负责触发您的http 调用。它还会自动取消订阅，因此您无需在组件 .ts 中的 ngOnDestroy 生命周期方法中显式调用 .unsubscribe()。

阅读更多关于它的信息：https://angular.io/api/common/AsyncPipe

Answer 2

公共组：字符串；将其更改为可观察类型

Answer 3

首先，您永远不应该在 get 方法中向您的 api 发出 get 请求。 （如果所有其他组件都正确编写，则更改这应该可以解决您的问题） 这样，您将无限调用它，直到程序崩溃。 所以不要这样称呼它：

<wrapper [group]="groupData"></wrapper>

您应该在 ngOnInit 方法或构造函数或任何其他您想要的地方设置数据，但要确保它不是以 get 方式调用的方法。

其次，你的类不是一个组件。正确编写的组件如下所示：

@Component({
  selector: 'app-some-component',
  templateUrl: 'some.component.html',
  styleUrls: ['some.component.scss']
})
export class SomeComponent implements OnInit  {
    groupData: string = "";

    constructor(private groupService: GroupService) {
    }
   
    ngOnInit() {
        groupData = getGroupData();
    }

    public getGroupData(): string {
        return this.groupService.getAll();
    }
}

请注意，这里有组件装饰器。 Selector 和 styleUrls 不是必需的，但在大多数情况下您仍会使用它。 TemplateUrl 可以替换为模板。

同样，第二个组件缺少“@Component”装饰器。

现在如果你添加

<wrapper [group]="groupData"></wrapper>

在 some.component.html 中，如果 GroupService 类编写正确，您应该会看到 getGroupData() 方法返回的字符串。

如果这有帮助，请告诉我，如果没有帮助，请写下其他信息（例如，关于 GroupService 类、带有 html 和装饰器的整个组件）