显示嵌套在对象中的数据 – Angular

huangapple go评论70阅读模式
英文:

displaying data nested within objects - angular

问题

I'm trying to display data within my dataset on my angular front end. Some info I want to display is nested within an Object Object. As you can see below, I'm having trouble displaying the lat and long values. I have tried this HTML:

<ng-container *ngFor="let geometry of trail?.geometry">
    <ng-container *ngFor="let location of geometry?.location">
        <ng-container *ngFor="let lat of location?.lat">
            {{ lat }}
        </ng-container>
    </ng-container>
</ng-container>

显示嵌套在对象中的数据 – Angular

英文:

I'm trying to display data within my dataset on my angular front end. Some info i want to display is nested within an Object Object. As you can see below. I'm having trouble displaying the lat and long values. I have tried this html:

                &lt;ng-container *ngFor=&quot;let geometry of trail?.geometry&quot;&gt;
                    &lt;ng-container *ngFor=&quot;let location of geometry?.location&quot;&gt;
                        &lt;ng-container *ngFor=&quot;let lat of location?.lat&quot;&gt;
                                {{ lat }}
                        &lt;/ng-container&gt;
                    &lt;/ng-container&gt;
                &lt;/ng-container&gt;

显示嵌套在对象中的数据 – Angular

答案1

得分: 0

如果我理解正确,您需要在HTML中显示经度,但在您的代码中,您试图迭代一个对象,在这种情况下是不可能的。要在HTML中显示经度,您只需要访问对象中的经度键,就像这样:

<ng-container>
    {{ geometry.location.lat }}
</ng-container>

如果您需要在经度有值时显示ng-container,您需要使用*ngIf进行验证。

希望这对您有所帮助。

英文:

If I understand you need to display the lat in the html, but in your code you are trying to iterate an object and that is not possible in this case, for display the lat in your html you only need to access to the key lat in your object, like this:

&lt;ng-container&gt;
            {{ geometry.location.lat }}
 &lt;/ng-container&gt;

If you need to show the ng-container when the lat have a value, you need to validate with *ngIf.

I hope this can be useful for you.

huangapple
  • 本文由 发表于 2023年2月10日 02:57:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/75403227.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定