角度：异步 | keyvalue --> 类型 'X' 上不存在属性 'X'

Question

我是 Angular 和 TypeScript 的新手 :) 我有一个问题让我很头疼......

我有以下组件：

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.scss']
})
export class PostsComponent implements OnInit {
        
  analysisType: string = "Posts";
  limit: number = initLimitValue;
      
  posts$!: Observable<Post[]>;
      
  constructor(public dataCollectorService: DataCollectorService) { }
      
  ngOnInit(): void {
    this.posts$ = this.dataCollectorService.squeezePosts(this.analysisType, this.limit).pipe(debounceTime(400), distinctUntilChanged());
  }
}

这是模板：

<div class="posts-div">
    <div *ngFor="let post of posts$ | async | keyvalue">
        {{ post.value.title }}
    </div>
</div> 

此组件使用以下服务：

@Injectable({
  providedIn: 'root'
})
export class DataCollectorService {

  private url = 'http://localhost:8080/mydata/';

  constructor(private http: HttpClient) { 
  }


  squeezePosts(analysisType: string, limit: number): Observable<Post[]>{ 
    return this.http.get<Post[]>(`${this.url}${analysisType}/"none"/none"/${limit}`)
    .pipe(
      catchError(this.handleError<Post[]>('squeezePosts', undefined))
    );
  }

  private handleError<T>(operation='operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error);
      console.log(operation + ' failled: ' + error.message);
      return of(result as T);
    }
  }
}

这是我从本地主机服务器得到的响应：

{
    "0": {
        "title": "0 - My title test",
        "selftext": "0 - My selftext test, My selftext test. My selftext test ..."
    },
    "1": {
        "title": "1 - My title test",
        "selftext": "1 - My selftext test, My selftext test. My selftext test ..."
    }
}

这是我的

Post

界面：

export interface Post {
    title: string,
    selftext: string
}

最后，这是我无法摆脱的错误：

属性“title”在类型“number | 上不存在”发表 | (() => 字符串) | (() => 字符串) | (() => 发布 | 未定义) | ((...items: Post[]) => number) | { (...items: ConcatArray[]): Post[]; (...项目: (Post | ConcatArray<...>)[]): Post[]; } | ... 25 更多... | ((searchElement: Post, fromIndex?: number | undefined) => boolean)'.

属性“title”在类型“number”上不存在。

你能帮忙解决这个错误吗？

Answer 1

根据您的回复，它是 不是 Post (

Post[]

) 的数组。

但是它是键值对/字典的集合，key为

string

类型，value为

Post

类型。

{
    "0": {
        "title": "0 - My title test",
        "selftext": "0 - My selftext test, My selftext test. My selftext test ..."
        }
    "1": {
        "title": "1 - My title test",
        "selftext": "1 - My selftext test, My selftext test. My selftext test ..."
        }
}

---

解决方案一：

Map<string, Post>

用

posts$

类型声明

Observable<Map<string, Post>>

。

数据收集器.service.ts

squeezePosts(analysisType: string, limit: number): Observable<Map<string, Post>> {
    return this.http
       .get<Map<string, Post>>(`${this.url}${analysisType}/"none"/none"/${limit}`)
       .pipe(catchError(this.handleError<Map<string, Post>>('squeezePosts', undefined)));
}

posts.component.ts

posts$!: Observable<Map<string, Post>>;

StackBlitz 上的示例解决方案 1

---

解决方案 2：

KeyValuePair<Post>

• 使用通用类型创建接口

  KeyValuePair

  。
• 用

  posts$

  类型声明

  Observable<KeyValuePair<Post>>

  。

键值对.ts

export interface KeyValuePair<T> {
  [key: string]: T;
}

数据收集器.service.ts

import { KeyValuePair } from '../models/key-value-pair';

squeezePosts(
    analysisType: string,
    limit: number
  ): Observable<KeyValuePair<Post>> {
     return this.http
       .get<KeyValuePair<Post>>(`${this.url}${analysisType}/"none"/none"/${limit}`)
       .pipe(catchError(this.handleError<KeyValuePair<Post>>('squeezePosts', undefined)));
}

posts.component.ts

import { KeyValuePair } from '../models/key-value-pair';

posts$!: Observable<KeyValuePair<Post>>;

StackBlitz 上的示例解决方案 2