无法将http帖子响应绑定到Angular中的下拉列表

Question

我试图将我的帖子响应绑定到我的下拉列表，但在下拉文本框中，它显示[object Object]我的请求有两个结果ArticleID和Title我需要在下拉列表中显示Title，并将标题的ArticleID保存在变量中以供进一步使用。可能是我的逻辑完全错了，我迷失了方向。

JSON Post响应

{
ArticleID:1
Title: Raven,
ArticleID:4
Title: sam,
} 

应用程序组件.ts

ngOnInit() {
this.searchField.valueChanges
.pipe(
debounceTime(5000),
distinctUntilChanged(),
map((val) => {
this.http.post<any>('http://localhost:3000/articles/articleslistData', { pubid: '3',pubdate: "2021-01-13" }).subscribe({
next: data => {
console.log(data);
},
error: error => {
this.errorMessage = error.message;
console.error('There was an error!', error);
}
})
})
)
.subscribe();
} 

app.component.html

<div class="form-field col-lg-12">
<label class="label" for="message">Headline</label>
<input id="message" class="input-text js-input" type="text" *ngFor="let Article of ArticleList  
[value]="user.clientCode" [formControl]="searchField"> 
{{Article.Title}}
</div> 

Answer 1

理想情况下，您的响应应该是一个数组：

const response = [{
ArticleID:1
Title: Raven
},{
ArticleID:4
Title: sam,
}]

然后，您可以对其进行迭代，并将其显示为下拉选项：

<select>
<option *ngFor="let item of response" [value]="item.ArticleID">{{item.Title}}</option>
</select>