小编rsl*_*mos的帖子

我正在开发一个 Angular 指令来检测（并删除）列表中的空项目*ngFor。

我不是添加一个X将触发删除的按钮（每个项目），而是更倾向于基于内容的方法：如果用户完全删除或只是删除某个项目的某些关键字段，它将立即不存在当用户关注文档的另一部分时。

我成功地做到了（令我惊讶的是，它一点也不难）。我将在这里强调关键方面：

使用指令

模板

  <div *ngFor="let item of data; index as i"
    [appInPlaceDelete]="isEmpty"
    (delete)="onDelete(i)"
  >

成分

  onDelete(i: number) {
    // code to erase ith item
  }

  private isEmpty(item): boolean {
    // logic to answer if item is empty or not
  }

执行

@Directive({
  selector: '[appInPlaceDelete]'
})
export class InPlaceDeleteDirective<T> implements OnInit, DoCheck {
  @Input() appInPlaceDelete: (t: T) => boolean;
  @Output() delete: EventEmitter<undefined> = new EventEmitter();

  // ...

  private $implicit: T;
  private focusstream …

在打字稿中，是否可以声明一个类型，声明它们的属性具有某种给定的模式，例如，它们都以字符结尾w？

对于本示例，这是一个符合该类型的对象：

{
    "250w": ...,
    "1024w": ...,
    "300w": ...
}

以下对象不符合（上面给出的示例）：

{
    "share": ...,
    "bound": ...,
    "cut": ...,
}

我在想这样的事情：

interface MyCrazyType {
   [key ????]: any;
}

假设我有一个带有一些字段的简单表单（Stackblitz 示例）：

@Component({
  selector: 'my-app',
  template: 
`
<h1>AppComponent</h1>

<form>
  <h2>UserData</h2>
  <userdata [user]="model.userData"></userdata>

  <h2>Actions</h2>
  <actionbar ></actionbar>
</form>
`,
})
export class AppComponent  { ... }

@Component({
  selector: 'userdata',
  template: 
`
<span class="status {{name.status}}">{{name.status}}</span>
full name:
<input name="name" #name="ngModel" pattern="^.* .*$" required [(ngModel)]="user.name">
<br>

<h3>--- Contacts ---</h3>

<span class="status {{email.status}}">{{email.status}}</span>
email:
<input name="email" #email="ngModel" type="email" [email]="true" [(ngModel)]="user.contacts.email">
<br>


<span class="status {{phone.status}}">{{phone.status}}</span>
phone:
<input name="phone" #phone="ngModel" pattern="^[0-9]*$" [(ngModel)]="user.contacts.phone">
<br>


<h4>---- Address ----</h4>

<span class="status {{street.status}}">{{street.status}}</span>
street:
<input name="street" #street="ngModel" [(ngModel)]="user.contacts.address.street">
<br> …