C# 仅显示“材质设计”表中不可为空的行

我已经在Angular 6中创建了一个测验，使用材料设计组件表，如下所示。我从API数组中得到四个选项的答案。问题是当我只想显示两个选项时，那么我从API得到两个选项，其中值为

null

。在本例中，它显示我的表，其中有四行而不是两行。如何仅显示两行

<table mat-table *ngIf="questions" [dataSource]="questions[quizService.qnProgress].Options" class="mat-elevation-z8">
    <ng-container matColumnDef="answer" *ngIf="element !== null">
        <th mat-header-cell *matHeaderCellDef> {{ questions[quizService.qnProgress].Question }} </th>
        <td mat-cell *matCellDef="let element"> {{element}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'highlight': selectedRowIndex == row}"
      (click)="highlight(row)"></tr>
</table>

{{问题[quizService.qnProgress].Question}
{{element}}

这是从API返回带有选项的问题的方法：

[HttpGet("/questions")]
public ActionResult<List<QuestionDetails>> GetQuestions()
{
    var result = _quizService.GetAllQuestions()
                .Select(x => new QuestionDetails
                {
                    Id = x.Id,
                    Question = x.QuestionQuiz,
                    ImageName = x.ImageName,
                    Options = new string[] { x.Option1, x.Option2, x.Option3, x.Option4 }
                })
                .OrderBy(y => Guid.NewGuid())
                .Take(10)
                .ToList();

    return result;
}

[HttpGet（“/questions”）]
公共行动结果GetQuestions（）
{
var result=\u quizService.GetAllQuestions（）
.选择（x=>新问题详细信息
{
Id=x.Id，
问题=x.问题测验，
ImageName=x.ImageName，
选项=新字符串[]{x.Option1，x.Option2，x.Option3，x.Option4}
})
.OrderBy（y=>Guid.NewGuid（））
.Take（10）
.ToList（）；
返回结果；
}

---

也许更好的解决方案是改变API方法？但是怎么做呢？谢谢你的建议。

我不熟悉Angular，但在C方面，一个想法是通过在数组赋值中添加

.Where

子句，将API方法更改为只返回非空（或空）的选项（这也需要在文件顶部使用System.Linq；来使用扩展方法）:

[HttpGet（“/questions”）]
公共行动结果GetQuestions（）
{
return _quizService.GetAllQuestions（）
.选择（x=>新问题详细信息
{
Id=x.Id，
问题=x.问题测验，
ImageName=x.ImageName，
Options=new[]{x.Option1，x.Option2，x.Option3，x.Option4}
.Where（option=>！string.IsNullOrEmpty（option））
})
.OrderBy（y=>Guid.NewGuid（））
.Take（10）
.ToList（）；
}

您可以创建一个过滤器来过滤掉

null

值。是的，它正在工作，但需要在LINQ表达式的末尾添加.ToArray（）。

[HttpGet("/questions")]
public ActionResult<List<QuestionDetails>> GetQuestions()
{
    return _quizService.GetAllQuestions()
        .Select(x => new QuestionDetails
        {
            Id = x.Id,
            Question = x.QuestionQuiz,
            ImageName = x.ImageName,
            Options = new [] { x.Option1, x.Option2, x.Option3, x.Option4 }
                .Where(option => !string.IsNullOrEmpty(option))
        })
        .OrderBy(y => Guid.NewGuid())
        .Take(10)
        .ToList();
}