Angular 5需要计算组件中的属性

Question

我对Angular 5还是很陌生，发现将所有内容与VueJS之类的优雅东西进行比较有多么繁琐。

尽管如此，我仍需学习。我需要在控制器中的模型中或在模型中创建一个复合名称，但是我还没有弄清楚如何将其连接起来。

以下代码可以编译，但是只给我空白页，没有错误：

export class AppComponent {

    editMode =  false;
    name = { prefix: "Mr.", first: "John", mi: "K", last: "Smith" };
    namePrefix = [
      {key: "-1", text: ""},
      {key: "0", text: "Mr."},
      {key: "1", text: "Ms."},
      {key: "2", text: "Mrs."},
      {key: "3", text: "Dr."}
    ];
    attributes = ["1", "5", "7"];
    links = ["http://google.com", "https://connect.cray.us.com", "http://yahoo.com"];
    position = [ "First Position", "Position Two", "3rd Position"];
    topThree = [ "Yadda", "Badda", "Bing"];
    attribList = [
      {key: "1", text: "Attribute of first kind"},
      {key: "2", text: "Important Attribute"},
      {key: "3", text: "Really important attribute"},
      {key: "4", text: "Blue suede shoes"},
      {key: "5", text: "Back dimension"},
      {key: "6", text: "Front dimension"},
      {key: "7", text: "Forward dimension"},
      {key: "8", text: "Fifth dimension"},
      {key: "9", text: "One less egg to fry"}
    ];

    fullUserName = this.getFullUserName();

    //if I delete this and directly assign the value, it runs:  
    getFullUserName() {
      var result = [];
      var props = ['prefix', 'first', 'mi', 'last'];
      for (var i = 0; i < props.length; i++) {
         var prop = props[i];
         var item = this.name[prop];
         if (item !== "") {
            if (prop === "mi") {
               item += ".";
            }
            result.push(item);
         }
      }
      return result.join(' ');
    }


    toEditMode() {
      this.editMode = true;
    }

    cancel() {
      this.editMode = false;
    }

    save() {
      this.editMode = false;
    }

};  

这是模板，好像很重要：

<div class="centeredLayout">
    <div class="profile" id="profile">
        <header>
            <h1>User Profile</h1>
            <div class="buttons">
                <button *ngIf="!editMode" (click)="toEditMode()">Edit</button>
                <button *ngIf="editMode" (click)="cancel()">Cancel</button>
                <button *ngIf="editMode" (click)="save()">Save</button>
            </div>
        </header>
        <div class="row" >
            <div class="control name">
                <label>Employee Name</label>
                <div *ngIf="editMode" class="float">
                    <div class="control small">
                        <label>Prefix</label>
                        <select [value]="name.prefix">
                            <ng-template *ngFor="let item of namePrefix">
                                <option [value]="item.text" >{{item.text}}</option>
                            </ng-template>
                        </select>
                    </div>
                    <div class="control medium">
                        <label>First Name</label>
                        <input type="text" [value]="name.first" />
                    </div>
                    <div class="control short">
                        <label>MI</label>
                        <input type="text" [value]="name.mi" />
                    </div>
                    <div class="control medium">
                        <label>Last Name</label>
                        <input type="text" [value]="name.last" />
                    </div>
                </div>
                <p *ngIf="!editMode">{{fullUserName}}</p>
            </div>
            <div>
                <div class="control fullWidth">
                    <label>Attributes</label>
                    <div class="multiselect" *ngIf="editMode">
                        <label *ngFor="let item of attribList">
                            <input type="checkbox" [value]="item.key" ngModel="attributes" /><span>{{item.text}}</span>
                        </label>
                    </div>
                    <div *ngIf ="!editMode" class="list">
                        <ng-template *ngIf="item.key in attributes"></ng-template>
                        <p *ngFor="let item of attribList">{{item.text}}</p> 
                    </div>
                </div>
                <div class="control fullWidth">
                    <label>Top Three</label>
                    <ng-template *ngIf ="editMode">
                        <input *ngFor="let item of topThree" type="text" :data-index="index" [value]="item" v-on:keyup="updateTopThree"/>
                    </ng-template>
                    <div *ngIf ="!editMode" class="list">
                        <p *ngFor="let item of topThree" >{{item}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control">
                <label class="withButton">Position</label>
                <button *ngIf="editMode" v-on:click="addPosition">Add</button>
                <ul *ngIf ="!editMode">
                    <li *ngFor="let item of position">{{item}}</li>
                </ul>
                <div *ngIf="editMode">
                    <div class="group" *ngFor="let item of position">
                        <input :data-index="index" type="text" [value]="item" v-on:keyup="updatePosition" /><button v-on:click="removePosition" class="symbol" :data-index="index">r</button>
                    </div>
                </div>
            </div>
            <div class="control full">
                <label>Links</label>
                    <ng-template *ngIf="editMode">
                        <input *ngFor="let item of links" :data-index="index" [value]="item"  
                    v-on:keyup="updateLinks" />
                    </ng-template>
                <div class="list" *ngIf="!editMode">
                    <p *ngFor="let item of links"><a :href="item">{{ item}}</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

一个更好的模板，它仍然不能完成我想要的很多事情，但这是一个不同的问题。我不确定为什么模板不喜欢该函数来分配值，但是一旦修复，组件代码就可以正常工作。

<div class="centeredLayout">
    <div class="profile" id="profile">
        <header>
            <h1>User Profile</h1>
            <div class="buttons">
                <button *ngIf="!editMode" (click)="toEditMode()">Edit</button>
                <button *ngIf="editMode" (click)="cancel()">Cancel</button>
                <button *ngIf="editMode" (click)="save()">Save</button>
            </div>
        </header>
        <div class="row" >
            <div class="control name">
                <label>Employee Name</label>
                <div *ngIf="editMode" class="float">
                    <div class="control small">
                        <label>Prefix</label>
                        <select [value]="name.prefix">
                            <ng-template *ngFor="let item of namePrefix">
                                <option [value]="item.text" >{{item.text}}</option>
                            </ng-template>
                        </select>
                    </div>
                    <div class="control medium">
                        <label>First Name</label>
                        <input type="text" [value]="name.first" />
                    </div>
                    <div class="control short">
                        <label>MI</label>
                        <input type="text" [value]="name.mi" />
                    </div>
                    <div class="control medium">
                        <label>Last Name</label>
                        <input type="text" [value]="name.last" />
                    </div>
                </div>
                <p *ngIf="!editMode">{{fullUserName}}</p>
            </div>
            <div>
                <div class="control fullWidth">
                    <label>Attributes</label>
                    <div class="multiselect" *ngIf="editMode">
                        <label *ngFor="let item of attribList">
                            <input type="checkbox" [value]="item.key" /><span>{{item.text}}</span>
                        </label>
                    </div>
                    <div *ngIf="!editMode" class="list">
                        <ng-template *ngFor="let item of attribList">
                            <p>{{item.text}}</p> 
                        </ng-template>
                    </div>
                </div>
                <div class="control fullWidth">
                    <label>Top Three</label>
                    <ng-template *ngIf ="editMode">
                        <input *ngFor="let item of topThree" type="text" :data-index="index" [value]="item" v-on:keyup="updateTopThree"/>
                    </ng-template>
                    <div *ngIf ="!editMode" class="list">
                        <p *ngFor="let item of topThree" >{{item}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="control">
                <label class="withButton">Position</label>
                <button *ngIf="editMode" v-on:click="addPosition">Add</button>
                <ul *ngIf ="!editMode">
                    <li *ngFor="let item of position">{{item}}</li>
                </ul>
                <div *ngIf="editMode">
                    <div class="group" *ngFor="let item of position">
                        <input :data-index="index" type="text" [value]="item" v-on:keyup="updatePosition" /><button v-on:click="removePosition" class="symbol" :data-index="index">r</button>
                    </div>
                </div>
            </div>
            <div class="control full">
                <label>Links</label>
                    <ng-template *ngIf="editMode">
                        <input *ngFor="let item of links" :data-index="index" [value]="item"  
                    v-on:keyup="updateLinks" />
                    </ng-template>
                <div class="list" *ngIf="!editMode">
                    <p *ngFor="let item of links"><a :href="item">{{ item}}</a></p>
                </div>
            </div>
        </div>
    </div>
</div>