Question

我似乎不明白为什么我的代码不起作用。我已经浏览了很多关于SO的帖子，我认为我的代码应该可行。这是我的代码：

ts档

const thumbSize = 10
const range = document.querySelector('input[type=range]')
const tooltip = document.querySelector('.tooltip')

range.addEventListener('input', e => {
  const ratio = (range.value - range.min) / (range.max - range.min)
  tooltip.style.left = `calc(${thumbSize / 10}px + ${ratio * 100} - ${ratio} * ${thumbSize}px)`
}

html文件

import { Component } from '@angular/core';

@Component({
    selector: 'my-array',
    templateUrl: './array.component.html',
})
export class ArrayComponent {
    private content: Test[];

    constructor() {
        this.content = [{
            heading: 'header',
            image: 'image',
            footerContent: 'footer',
            testData: [{
                title: 'title1',
                content: 'content1'
            }, {
                title: 'title2',
                content: 'content2'
            }]
        }]
    }
}

export class Test {
    heading: string;
    image: string;
    footerContent?: string;
    testData: TestItem[];
}

export class TestItem {
    title: string;
    content: string;
}

错误

<div *ngFor="let test of content;">
    <h2>{{test.heading}}</h2>
    <div class="columnOne" id="accordion" role="tablist" aria-multiselectable="true">
        <div *ngfor="let item of test.testData;">
            <div role="tab" id="headingone">
                <h4>
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="true" aria-controls="collapseone">
                        {{item.title}}
                    </a>
                </h4>
                <div id="collapseone" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingone">
                    <div class="panel-body">
                        {{item.content}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>{{test.footerContent}}</div>
</div>

Answer 1

我不知道这是否可以解决整个问题，但是您的第二个*ngFor应该以全小写*ngfor输入。 Angular是区分大小写的，所以要修复它，看看你能得到多少。

ngFor inside ngFor在Angular 4对象数组中显示数组

1 个答案: