Angular Material float 标签不 float

Question

我有一个 angular form在此 form是两个 angular material inputs
文档中有一个属性表明您可以使标签始终 float ，因此我尝试复制它，但无论出于何种原因它都不起作用。

这是 HTML

<form *ngIf="frmNotes" [formGroup]="frmNotes">
                <mat-form-field [floatLabel]="always" style="width: 100%">
                    <input matInput placeholder="Subject" formControlName="subject" [(ngModel)]="note.subject">
                </mat-form-field>
                <mat-form-field [floatLabel]="always" style="width: 100%;">
                    <textarea formControlName="note" matInput placeholder="Write a note.." [(ngModel)]="note.value"></textarea>
                </mat-form-field>
            </form>

这是TS

import { Component } from "@angular/core";
import { ActivatedRoute } from '@angular/router';
import { ProfileService } from "../../services/profile-service";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

@Component({
    selector: 'note-component',
    templateUrl: 'note.component.html',
    styleUrls: ['./note.component.css']
})

export class NoteComponent {
    notes: any;
    frmNotes: FormGroup;
    note: LooseObject = {};

    constructor(private route: ActivatedRoute, private profileService: ProfileService, private formBuilder: FormBuilder) {
      this.frmNotes = formBuilder.group({});
    }

    ngOnInit() {
        this.route.params.subscribe(res => {
            this.profileService.getNotes(res.id).subscribe(data => {
                this.notes = data.notes;
            }, err => console.error(err));

        });
        this.frmNotes = this.formBuilder.group({
            note: ['', Validators.required],
            subject: ['', Validators.required]
        });
    }

}

这是它的外观图像:

Answer 1

方括号表示模板表达式 - [floatLabel]="always"将查找名为 always 的变量在您的组件中，本质上相当于 floatLabel="{{always}}" .你需要包围always如果要直接传递，请使用单引号或删除方括号:[floatLabel]="'always'"或 floatLabel="always" .