关于不显示垫卡

Question

我使用了一个 mat-card，在里面我使用了 mat-card-title 和一个带有 4 到 5 个控件的表单，mat-card 布局在浏览器中的部署中不可见，但是 mat-card 标题正在显示，我已经发布了表单仅 mat-card-content 内的内容和控件

这是模板代码，

<mat-card id="card" style="text-align: center;">
<mat-card-title>Details</mat-card-title>
<mat-card-content>
    <form [formGroup] = "activityPlannerService.form" class="normal-form" (submit) = "onSubmit()">
        <mat-grid-list cols="2" rowHeight="400px">
            <mat-grid-tile>
                <div class="controlers-container">
                    <input type="hidden" formControlName="$key">

                    <mat-form-field>
                        <mat-select formControlName="releaseName" placeholder="Release Name *">
                            <mat-option>None</mat-option>
                            <ng-container *ngFor="let release of releaseArray">
                                <mat-option value = "{{release.label}}">{{release.value}}</mat-option>
                            </ng-container>
                        </mat-select>
                        <mat-error>This field is mandatory</mat-error>
                    </mat-form-field>
                    <mat-form-field>
                        <mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple>
                            <mat-option>None</mat-option>
                            <ng-container *ngFor="let sprint of sprintArray">
                                <mat-option value = "{{sprint.label}}">{{sprint.value}}</mat-option>
                            </ng-container>
                        </mat-select>
                        <mat-error>This field is mandatory</mat-error>
                    </mat-form-field>
                    <mat-form-field>
                        <mat-select formControlName="userName" placeholder="User Name *" multiple>
                            <mat-option>None</mat-option>
                            <ng-container *ngFor="let user of userArray">
                                <mat-option value = "{{user.label}}">{{user.value}}</mat-option>
                            </ng-container>
                        </mat-select>
                        <mat-error>This field is mandatory</mat-error>
                    </mat-form-field>
                    <mat-form-field>
                        <mat-select formControlName="activity" placeholder="Activities *" multiple>
                            <mat-option>None</mat-option>
                            <ng-container *ngFor="let activity of activitiesArray">
                                <mat-option value = "{{activity.label}}">{{activity.value}}</mat-option>
                            </ng-container>
                        </mat-select>
                        <mat-error>This field is mandatory</mat-error>
                    </mat-form-field>
                    <mat-form-field>
                        <input formControlName="plannedEffort" matInput placeholder="Planned Efforts">

                        <mat-error>This field is mandatory</mat-error>
                    </mat-form-field>
                    <div class="button-row">
                        <button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button>
                        <button mat-raised-button color="warn" (click) = "onClear()">Clear</button>
                    </div>
                </div>
            </mat-grid-tile>
        </mat-grid-list>
    </form>
    </mat-card-content>
    </mat-card>

这是浏览器output window的图像，

我知道我只是犯了一个小错误，我是新手，请纠正我，提前谢谢:-)

Answer 1

请尝试使用以下代码行。

 <mat-card> <mat-card-header> <mat-card-title>Details</mat-card-title> </mat-card-header> <form [formGroup]="activityPlannerService.form" class="normal-form" (submit)="onSubmit()"> <mat-card-content> <mat-grid-list cols="2" rowHeight="400px"> <mat-grid-tile> <div class="controlers-container"> <input type="hidden" formControlName="$key"> <mat-form-field> <mat-select formControlName="releaseName" placeholder="Release Name *"> <mat-option>None</mat-option> <ng-container *ngFor="let release of releaseArray"> <mat-option value="{{release.label}}">{{release.value}}</mat-option> </ng-container> </mat-select> <mat-error>This field is mandatory</mat-error> </mat-form-field> <mat-form-field> <mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple> <mat-option>None</mat-option> <ng-container *ngFor="let sprint of sprintArray"> <mat-option value="{{sprint.label}}">{{sprint.value}}</mat-option> </ng-container> </mat-select> <mat-error>This field is mandatory</mat-error> </mat-form-field> <mat-form-field> <mat-select formControlName="userName" placeholder="User Name *" multiple> <mat-option>None</mat-option> <ng-container *ngFor="let user of userArray"> <mat-option value="{{user.label}}">{{user.value}}</mat-option> </ng-container> </mat-select> <mat-error>This field is mandatory</mat-error> </mat-form-field> <mat-form-field> <mat-select formControlName="activity" placeholder="Activities *" multiple> <mat-option>None</mat-option> <ng-container *ngFor="let activity of activitiesArray"> <mat-option value="{{activity.label}}">{{activity.value}}</mat-option> </ng-container> </mat-select> <mat-error>This field is mandatory</mat-error> </mat-form-field> <mat-form-field> <input formControlName="plannedEffort" matInput placeholder="Planned Efforts"> <mat-error>This field is mandatory</mat-error> </mat-form-field> </div> </mat-grid-tile> </mat-grid-list> </mat-card-content> <mat-card-actions> <div class="button-row"> <button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button> <button mat-raised-button color="warn" (click)="onClear()">Clear</button> </div> </mat-card-actions> </form> </mat-card>