角度材质浮动标签不浮动

Question

我有一个angular form这form是两个angular material inputs

文档中有一个属性指出您可以使标签始终浮动，因此我尝试复制它，但由于某种原因它不起作用。

这是 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"。