在高于68.x.x.x的chrome版本中,几乎没有来自Angular材质的控件。诸如mat-form-field,matInput,mat-error,mat-autocomplete内部表单之类的角材料不可见。
操作系统-windows 10 Package.json:-一些细节-
{
"name": "my-first-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.0.0",
"@angular/cdk": "^7.0.4",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/material": "^7.0.4",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"core-js": "^2.5.4",
"moment": "^2.22.2",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.3.3",
"systemjs": "0.19.41",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.10.0",
"@angular/cli": "~7.0.5",
"@angular/compiler-cli": "~7.0.0",
"@angular/language-service": "~7.0.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^10.12.7",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
}
<div class="view">
<div mat-dialog-title>
{{Title}}
<button mat-button [matTooltipShowDelay]="500" matTooltip="Close dialog" type="button" (click)="close()" class="material-icons close closeOrGoBackButton">close</button>
</div>
<table class="class1">
<form [formGroup]="FormGroup1" (ngSubmit)="isExisting ? reshcedule() : book()">
<tr *ngIf="isExist`enter code here`ingAppointment">
<td colspan="2">
<h3> {{FormGroup1.get('type').value.Name}} </h3>
</td>
</tr>
<tr *ngIf="!isExistingAppointment">
<td>
<mat-form-field>
<input matInput id="type" type="text" placeholder="type" formControlName="type" [matAutocomplete]="autoService">
<mat-error *ngIf="FormGroup1.get('type') && FormGroup1.get('type').hasError('required')">
Select the required type.
</mat-error>
<mat-error *ngIf="FormGroup1.get('type') && FormGroup1.get('type').hasError('validatetype')">
Select type from list.
</mat-error>
<mat-error *ngIf="FormGroup1.get('type') && FormGroup1.get('type').hasError('500005')">
{{getBusinessRuleErrorMessage('500005')}}
</mat-error>
<mat-error *ngIf="FormGroup1.get('type') && FormGroup1.get('type').hasError('typeId')">
<span *ngFor="let inputError of getInputValidationErrorMessages('typeId')">
{{inputError}}<br/>
</span>
</mat-error>
<mat-autocomplete [displayWith]="displaySelectedtype" #autoService="matAutocomplete">
<mat-option (onSelectionChange)="change($event,type.Id)" *ngFor="let type of filteredtypes | async" [value]="type">
{{type.Name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</td>
<td><button mat-button [matTooltipShowDelay]="500" matTooltip="Reset" type="button" (click)="reset()" class="resetMdAutoComplete"><img class="img" /></button></td>
</tr>
</form>
</table>
</div>
这是angular应用程序中使用的角材料组件。