如何在表中使用两个具有两个不同数组迭代的 ng-container？答案

【问题标题】：How to use two ng-container with two different arrays iteration in a table?如何在表中使用两个具有两个不同数组迭代的 ng-container？
【发布时间】：2021-06-23 10:27:47
【问题描述】：

我有这样的事情：

<ng-container *ngFor = "let result of results">                             
    <th [ngClass]= "option1 || option2 ? 'class1': 'class2' "> 
        <div [ngClass]= " option1  || option2 ? 'class1': 'class2'" class = "header-cell">
            <div [ngClass]= " option1 || option2 ? 'class3': 'class4' " class = "day-header-data">  
                    
                <div> {{ result.initial</div>
                <div class = "date"> 
                    {{ result.date | date: 'dd/MM' }}    
                </div>
          
            </div>
        </div>
        
    </th>
</ng-container>

我想要做的是在 div 中带有我想使用另一个迭代值的日期。我需要迭代 *ngFor = "let date of dates" 并使用 {{ date |日期：'dd/MM' }}。

如果我这样做，它会崩溃：

<ng-container *ngFor = "let date of dates">
    <ng-container *ngFor = "let result of results">
                                    
        <th [ngClass]= "option1 || option2 ? 'class1': 'class2' "> 
            <div [ngClass]= " option1  || option2 ? 'class1': 'class2'" class = "header-cell">
                <div [ngClass]= " option1 || option2 ? 'class3': 'class4' " class = "day-header-data">  
                        
                    <div> {{ result.initial</div>
                    <div class = "date"> 
                        {{ date | date: 'dd/MM' }}    
                    </div>
              
                </div>
            </div>
            
        </th>
    </ng-container>
</ng-container>

发生这种情况是因为要获得结果我需要稍等片刻，因为它来自 http 请求，而日期是我已经拥有的简单日期数组。

我该怎么做？我可以通过哪种方式移动 div？非常感谢

【问题讨论】：

你能在问题中添加错误吗？是什么使 for 循环或其他事情失败了？

标签： angular typescript

【解决方案1】：

处理HTTP请求结果使用？ {{ result?.initial }

<ng-container *ngFor = "let date of dates">
    <ng-container *ngFor = "let result of results">
                                    
        <th [ngClass]= "option1 || option2 ? 'class1': 'class2' "> 
            <div [ngClass]= " option1  || option2 ? 'class1': 'class2'" class = "header-cell">
                <div [ngClass]= " option1 || option2 ? 'class3': 'class4' " class = "day-header-data">  
                        
                    <div> {{ result?.initial }}</div>
                    <div class = "date"> 
                        {{ date | date: 'dd/MM' }}    
                    </div>
              
                </div>
            </div>
            
        </th>
    </ng-container>
</ng-container>

【讨论】：