在没有 *Ngfor 的情况下显示数据答案

【问题标题】：Displaying Data without *Ngfor在没有 *Ngfor 的情况下显示数据
【发布时间】：2021-10-30 06:08:50
【问题描述】：

我试图在不使用ngFor 循环的情况下显示数据。它运行良好，但显示了来自多个客户的所有报价信息。 CSS 的布局方式是在 customerinfo div 旁边有折扣 div 这是 HTML

<hr />
<div class="info">
    <div id="CustomerInfoInline" *ngIf="quotes" >
        <div *ngFor="let q of quotes">
            <h6>Name: {{q.firstName}} {{q.lastName}}</h6>
            <h6>Address: {{q.address}}</h6>
            <h6>City, State, Zip: {{q.city}}, {{q.state}}, {{q.zip}}</h6>
            <h6>SSN: {{q.SSN}}</h6>
            <h6>DOB: {{q.dateOfBirth}}</h6>
            <h6>Email: {{q.email}}</h6>
            <h6>Prev. Carrier: {{q.previousCarrier}}</h6>
            <h1>-----------------------------------------------------------------------------------------------</h1>
        </div>
    </div>

    <div *ngIf="quotes">
        <div id="CustomerDiscountsInline" *ngFor="let q of quotes">
            <h6 id="customerBold">Customer Discounts</h6>
            <h4 id="DiscountsID">discounts will be applied here</h4>
        </div>
    </div>
</div>
<hr />

以及相应的 TS

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '@environments/environment';
import { Quote } from '@app/_models/quote';
import { Router } from '@angular/router';

@Component({
  selector: 'app-quote-summary',
  templateUrl: './quote-summary.component.html',
  styleUrls: ['./quote-summary.component.css']
})
export class QuoteSummaryComponent implements OnInit {

    apiUrl: string = environment.apiUrl
    quotes: Quote[]
    //TODO: implement submitted quote view later
    //submittedQuotes: Quote[]

    constructor(private http: HttpClient, private router: Router) { }
 
    ngOnInit(): void {
        this.getQuotes()
    }
    // #region API Calls

    getQuotes() {
        var httpRequest = this.http.get<Quote[]>(`${this.apiUrl}/quotes`)

        httpRequest.subscribe(returnedQuotes => {
            this.quotes = returnedQuotes
        })
    }

}

【问题讨论】：

你想要完成/做什么？为什么不使用*ngFor 或*ngFor 给您带来什么问题，让您想做其他事情？
@Igor 我正在尝试仅显示一位客户的信息。所以通过电子邮件的名字。但不显示相同的信息，而是为下一个客户显示。它显示了多个 CustomerInfoInline div
你的意思是<h6>Name: {{quotes[0].firstName}} {{quotes[0].lastName}}</h6>？
您可以在数组上使用普通索引器。您还可以在组件中创建一个指向一个客户的字段，然后引用它。有很多方法可以做到这一点。
在组件中使用一个字段，然后将 2 替换为该字段。与普通 javascript 相同。

标签： html angular typescript

【解决方案1】：

如果您只需要显示一位客户，您可以使用quotes 的索引器，例如quotes[0]：

别忘了查看quotes.length > 0：

<div class="info">
    <div id="CustomerInfoInline" 
        <div *ngIf="quotes && quotes.length > 0">
            <h6>Name: {{quotes[0].firstName}} {{quotes[0].lastName}}</h6>
            <h6>Address: {{quotes[0].address}}</h6>
            ....
        </div>
    </div>
</div>

【讨论】：

@John 你的问题解决了吗？如果您需要使用动态索引，只需在组件中创建一个数字变量并使用它来代替常量索引，例如：quotes[indexer].firstname
是的。谢谢！