Question

我正在为我的Angular 4应用程序整理我的服务结构，并遇到了一个问题。

我想在我的API上调用GET请求，该请求会返回User，但在该用户内部，它还应返回Applications

列表

我创建了一个User.service.ts，看起来像是：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UserService {

    constructor(private _http: HttpClient) { }

    getAllUsers(){
    }

    getUserById(){

    }

    createUser(){            
    }       
}

因此，当我调用getUserById时，它将返回一个我已创建接口的User对象：

interface User {
    id: string;
    FirstName: string;
    LastName: string;
    Email: string;
    Role: string;
    Applications: //LIST OF APPLICATIONS
}

如何将Applications属性链接到我的Application.ts文件？

Answer 1

只需将其设为一系列应用程序：

Applications: Application[]

Answer 2

当你说＆＃34; List，＆＃34;你可能意味着Array（第一类JavaScript构造），所以你可能想要使用Application类型的数组。

import { Application } from './application.interface';

export interface User {
  /* ...other properties... */
  Applications: Array<Application>;
}

请注意，您也可以将其写为Application[]，这意味着同样的事情。它取决于你。我更喜欢前者，因为其他泛型没有类似的捷径。例如，您必须写Observable<Application>。

现在，在分配给userInstance.Applications或从Application读取时，假定该数组的每个属性都是一个应用程序。

假设您的{ id: number, name: string }界面非常简单，例如// not allowed userInstance.Applications.push(notAnApplication); userInstance.Applications[0].otherProperty; // allowed userInstance.Applications[1].id; userInstance.Applications.push({ id, name } as Application);，请注意以下几点：

[Application]

另请注意，Application作为类型声明不相同。这将是一个具有<?php use setasign\Fpdi\Fpdi; use setasign\Fpdi\PdfReader; require_once('fpdf/fpdf.php'); require_once('fpdi2/src/autoload.php'); $pdf = new Fpdi(); $pageCount = $pdf->setSourceFile('pdf1.pdf'); for ($pageNo = 1; $pageNo <= $pageCount; $pageNo++) { $tplIdx = $pdf->importPage($pageNo); // add a page $pdf->AddPage(); $pdf->useTemplate($tplIdx, 0, 30); $src = $target_file; $pdf->Image($src,170,0, 30, 30); } $pdf->Output(); ?>类型的单个属性的数组。

您可以在此处详细了解Typescript中的泛型：https://www.typescriptlang.org/docs/handbook/generics.html

Answer 3

位于代码文件的顶部

import { Application } from './Application';

确保在Application.ts

中导出应用程序

然后你的界面添加

Applications: Application[];

另外

不要忘记使用export，以便可以在声明它们的文件之外访问类型。
在方法上标记返回类型，我省略了CreateUser，因为它不清楚是否返回任何内容或接受参数。

完整代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { Application } from './Application';

@Injectable()
export class UserService {

    constructor(private _http: HttpClient) { }

    getAllUsers() : Observable<User[]> {
    }
    getUserById() : Observable<User> {
    }
}


export interface User {
    id: string;
    FirstName: string;
    LastName: string;
    Email: string;
    Role: string;
    Applications: Application[];
}

如何在另一个接口中实现一个接口

3 个答案: