角状材料浮标不浮动

Question

我angular form form上有两个angular material inputs

doc中有一个属性声明你可以使标签始终浮动，所以我试图复制它，但它无论出于何种原因都没有工作。

这是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"或删除方括号：