小编kno*_*fel的帖子

我想用它trackBy来提高一长串的性能。该列表的数据在更改时应该是不可变的，并通过异步管道提供给模板。尽管我正在使用该trackBy功能，但每次发出新值时都会重新呈现整个列表。即使数组内的对象保持相同且相同，也会发生这种情况id。

成分

export class AppComponent implements OnInit {
  data: Observable<any>;

  trackBy(index, item) {
    return item.id;
  }

  ngOnInit() {
    const data = interval(100).pipe(mapTo([
      { id: 1 }, { id: 2 }
    ]))

    this.data = data.pipe(map(events => events.map(event => ({ ...event }))));
  }
}

模板

<div *ngFor="let d of data | async; trackBy: trackBy">{{d}}</div>

另外这里还有一个StackBlitz。div每次将新值发送到 时，标签都会重新呈现ngFor。

据我了解，trackBy尽管引用发生了变化，但它应该检测到对象是相同的（通过 id 属性）。或者我明显错过了什么？

我正在尝试自定义 MUI 组件的外观<Button />。因为我想通过使用tailwind类来做到这一点，所以我尝试使用defaultProps而不是styleOverrides.

const lightTheme = createTheme({
  components: {
    MuiButton: { defaultProps: { classes: { root: 'p-8' } } },
  },
});

tailwind它工作正常，只是我在使用该组件时无法添加类<Button />，因为这将覆盖我上面所做的更改。

<Button variant="contained" classes={{ root: 'p-12' }}>
  Ok
</Button>

有没有办法扩展 prop 的定义classes而不是覆盖它？

我在一个<tr>元素中使用了一个ng-repeat 和一个指令.

HTML:

<tbody>
  <tr ng-repeat="row in rows" create-table>
    <td nowrap ng-repeat="value in row | reduceString>{{value}}</td>
  </tr>
</tbody>

指示:

app.directive('createTable', function () {
        return {

            link: function (scope, element, attrs) {
                var contentTr = scope.$eval('"<tr ng-show=&quot;false&quot;><td>test</td></tr>"');
                $(contentTr).insertBefore(element);
            }
        }
    }
);

虽然我可以<tr>为每个迭代添加一个新元素,但是在将它添加到DOM之后我无法获得角度代码(例如,在其中的ng-show <tr>).我错过了一些明显的东西吗

我正在尝试使用 AngularJS 实现客户端身份验证。现在，我将每个路由的访问级别作为工厂注入到我的应用程序的配置函数中。这是我的代码：

shop = angular.module('shop', ['ngCookies']).
provider('AccessLevels',function () {
    var accessLevels = {
        guest: 7,
        customer: 6,
        seller: 4
    };
    return {
        $get: function () {
            return accessLevels
        }
    }
}).
config(['$routeProvider', '$locationProvider', 'AccessLevelsProvider', function ($routeProvider, $locationProvider, AccessLevelsProvider) {

    var accessLevels = AccessLevelsProvider.$get();

    $routeProvider.
        when('/index', {templateUrl: "pages/index", controller: IndexController, access: accessLevels.guest}).
        when('/user', {templateUrl: "pages/user", controller: UserController, access: accessLevels.customer}).
        when('/sign_up', {templateUrl: "pages/sign_up", controller: SignUpController, access: accessLevels.guest});
}]);

是否可以通过 $http.get 请求获取我的访问级别的数据？我无法将 $http 注入到我的提供程序函数中，所以我现在有点无助。任何帮助，将不胜感激。

我观察到如果我defaultValues像下面提到的

  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: "test",
      lastName: "test2"
    }
  });

并且不要安装lastName

<form onSubmit={handleSubmit(onSubmit)}>
  <input {...register("firstName")} />
  <input type="submit" />
</form>

我懂了onSubmit

const onSubmit = (data) => {
  console.log(JSON.stringify(data, null, 4));
};

我看到以下内容

{
    "firstName": "test",
    "lastName": "test2"
} 

但我只想看到firstName因为我还没有安装lastName

{
    "firstName": "test",
} 

我正在对 mat-table 进行排序和删除/添加。

我一直在读这篇文章，无需排序即可正常工作。

当我在表上使用mat-table和属性时，停止工作。matSortrenderRows()

堆栈闪电战

一旦我删除排序属性，它就会再次起作用。

我找到了一个替代解决方案，但最好知道我是否做错了什么，是否有其他人使其工作，这是一个错误还是预期的行为？

不起作用：

delete(index: number): void {
  this.dataSource.data.splice(index, 1);
  this.table.renderRows();
}

有效：

delete(id: number): void {
  this.dataSource.data = this.dataSource.data.filter( (item: any) => item.id !== id);
}